diff --git a/v2/pink-sb/src/lib/CompoundTag/Child.svelte b/v2/pink-sb/src/lib/CompoundTag/Child.svelte
new file mode 100644
index 0000000000..6c69f68261
--- /dev/null
+++ b/v2/pink-sb/src/lib/CompoundTag/Child.svelte
@@ -0,0 +1,119 @@
+
+
+
+
+
diff --git a/v2/pink-sb/src/lib/CompoundTag/CompoundTag.svelte b/v2/pink-sb/src/lib/CompoundTag/CompoundTag.svelte
new file mode 100644
index 0000000000..7c780c4868
--- /dev/null
+++ b/v2/pink-sb/src/lib/CompoundTag/CompoundTag.svelte
@@ -0,0 +1,57 @@
+
+
+{#if visible}
+
+
+
+{/if}
+
+
diff --git a/v2/pink-sb/src/lib/CompoundTag/index.js b/v2/pink-sb/src/lib/CompoundTag/index.js
new file mode 100644
index 0000000000..c8b0012c81
--- /dev/null
+++ b/v2/pink-sb/src/lib/CompoundTag/index.js
@@ -0,0 +1,3 @@
+export { default as CompoundTag } from './CompoundTag.svelte';
+export { default as Child } from './Child.svelte';
+export { default } from './CompoundTag.svelte';
diff --git a/v2/pink-sb/src/lib/index.ts b/v2/pink-sb/src/lib/index.ts
index b4a5898523..3aac48fd74 100644
--- a/v2/pink-sb/src/lib/index.ts
+++ b/v2/pink-sb/src/lib/index.ts
@@ -9,6 +9,8 @@ export { default as InteractiveText } from './InteractiveText.svelte';
export { default as Root } from './Root.svelte';
export { default as Status } from './Status.svelte';
export { default as Tag } from './Tag.svelte';
+export * as CompoundTag from './CompoundTag/index.js';
+export { CompoundTag as CompoundTagRoot, Child as CompoundTagChild } from './CompoundTag/index.js';
export { default as ToggleButton } from './ToggleButton.svelte';
export { default as ProgressCircle } from './ProgressCircle.svelte';
export { default as Tooltip } from './Tooltip.svelte';
diff --git a/v2/pink-sb/src/stories/CompoundTag.stories.svelte b/v2/pink-sb/src/stories/CompoundTag.stories.svelte
new file mode 100644
index 0000000000..62fcd7c66b
--- /dev/null
+++ b/v2/pink-sb/src/stories/CompoundTag.stories.svelte
@@ -0,0 +1,173 @@
+
+
+
+
+
+
+
+
+
+
+ console.log('Clicked Status')}>Status
+ console.log('Clicked is')}>is
+ console.log('Clicked Active')}
+ >Active
+
+
+
+
+
+
+
+
+
+
+ Action
+
+
+
+
+
+
+
+
+
+ console.log('Clicked field')}>
+
+ Build duration
+
+ console.log('Clicked operator')}>is
+ console.log('Clicked value')}
+ >more than 2 minutes
+ console.log('Clicked remove')}>
+
+
+
+
+
+
+
+ console.log('Clicked type')}>Status
+ console.log('Clicked status')}>
+
+ Completed
+
+ console.log('Clicked action')}>
+
+
+
+
+
+
+
+
+ console.log('Clicked Tag')}>Tag
+ console.log('Clicked is')}>is
+ console.log('Clicked Tag')}>Tag
+ console.log('Clicked close')}
+ >
+
+
+ console.log('Clicked Tag')}>Tag
+ console.log('Clicked is')}>is
+ console.log('Clicked Tag')}>Tag
+ console.log('Clicked close')}
+ >
+
+
+
+
+
+
+ console.log('Clicked Tag')}>Tag
+ console.log('Clicked is')}>is
+ console.log('Clicked Tag')}>Tag
+ console.log('Clicked close')}>×
+
+
+
+
+
+ console.log('Clicked function')}
+ >function
+ console.log('Clicked name')}
+ >getUserData
+ console.log('Clicked params')}>()
+ console.log('Clicked return')}>return
+
+
+
+
+
+ console.log('Clicked Tag')}>Tag
+ console.log('Clicked is')}>is
+
+ Actions
+
+
+
+ Default
+
+
+ Default with a very long text
+
+
+ Disabled
+
+
+ Danger
+
+
+ Danger Disabled
+
+
+
+
+ console.log('Clicked close')}>
+
+
+
+