diff --git a/.changeset/dirty-pillows-drop.md b/.changeset/dirty-pillows-drop.md
new file mode 100644
index 0000000000..6a35f6ce9d
--- /dev/null
+++ b/.changeset/dirty-pillows-drop.md
@@ -0,0 +1,5 @@
+---
+"@primer/css": patch
+---
+
+Storybook: add Label stories
diff --git a/.vscode/story-template.code-snippets b/.vscode/story-template.code-snippets
new file mode 100644
index 0000000000..19736c0479
--- /dev/null
+++ b/.vscode/story-template.code-snippets
@@ -0,0 +1,80 @@
+{
+    "story-template": {
+        "prefix": "story-template",
+        "body": [
+            "import React from 'react'",
+            "import clsx from 'clsx'",
+            "// import { StoryTemplateName } from './OtherStoryFile.stories' // import stories for component compositions",
+            "",
+            "export default {",
+            "    title: 'Components/ComponentName',",
+            "    excludeStories: ['ComponentTemplateName'],",
+            "    argTypes: {",
+            "        booleanExample: {",
+            "            control: { type: 'boolean' },",
+            "            description: 'true/false toggle to controls',",
+            "            table: {",
+            "                category: 'Pick one: CSS, HTML, Interactive'",
+            "            }",
+            "        },",
+            "        selectExample: {",
+            "            options: [0, 1, 2, 3], // iterator",
+            "            mapping: ['string1', 'string2', 'string3', 'string4'], // values",
+            "            control: {",
+            "                type: 'select',",
+            "                labels: ['string1-label', 'string2-label', 'string3-label', 'string4-label'] // public labels",
+            "            },",
+            "            description: 'select menu mapping to strings (example: use for variant class names)',",
+            "            table: {",
+            "                category: 'Pick one: CSS, HTML, Interactive'",
+            "            }",
+            "        },",
+            "        stringExample: {",
+            "            name: 'stringExample',",
+            "            type: 'string',",
+            "            description: 'text box control',",
+            "            table: {",
+            "                category: 'Pick one: CSS, HTML, Interactive'",
+            "            }",
+            "        },",
+            "        children: {",
+            "            description: 'creates a slot for children',",
+            "            table: {",
+            "                category: 'HTML'",
+            "            }",
+            "        },",
+            "    }",
+            "}",
+            "",
+            "// build every component case here in the template (private api)",
+            "export const ComponentTemplateName = ({ booleanExample, selectExample, stringExample, children }) => (",
+            "    <div",
+            "        // use clsx for multiple classnames",
+            "        className={clsx('defaultClass', selectExample && `${selectExample}`, booleanExample && 'defaultClass--modifier')}",
+            "        // use undefined for values that shouldn't be set if false",
+            "        aria-hidden={booleanExample ? 'true' : undefined}",
+            "    >",
+            "        {/* use {children} for wrapper component templates */}",
+            "        <>",
+            "        {stringExample}",
+            "        {children}",
+            "        </>",
+            "    </div>",
+            ")",
+            "",
+            "// create a \"playground\" demo page that may set some defaults and allow story to access component controls",
+            "export const Playground = ComponentTemplateName.bind({})",
+            "Playground.args = {",
+            "    stringExample: 'Default text',",
+            "    booleanExample: false,",
+            "    children: (",
+            "        <>",
+            "            <StoryTemplateName someProp=\"Use props from other stories\" />",
+            "        </>",
+            "    )",
+            "}",
+            ""
+        ],
+        "description": "Basic component story jsx template"
+    }
+}
diff --git a/docs/src/stories/Button.stories.jsx b/docs/src/stories/components/Button/Button.stories.jsx
similarity index 100%
rename from docs/src/stories/Button.stories.jsx
rename to docs/src/stories/components/Button/Button.stories.jsx
diff --git a/docs/src/stories/components/Label/IssueLabel.stories.jsx b/docs/src/stories/components/Label/IssueLabel.stories.jsx
new file mode 100644
index 0000000000..98f99e8247
--- /dev/null
+++ b/docs/src/stories/components/Label/IssueLabel.stories.jsx
@@ -0,0 +1,58 @@
+import React from 'react'
+import clsx from 'clsx'
+
+export default {
+  title: 'Components/Label/IssueLabel',
+  excludeStories: ['IssueLabelTemplate'],
+  argTypes: {
+    variant: {
+      options: [0, 1, 2, 3], // iterator
+      mapping: [
+        'color-bg-accent-emphasis',
+        'color-bg-danger-emphasis',
+        'color-bg-success-emphasis',
+        'color-bg-attention-emphasis'
+      ], // values
+      control: {
+        type: 'select',
+        labels: ['accent', 'danger', 'success', 'attention'] // public labels
+      },
+      description: 'Colors',
+      table: {
+        category: 'CSS'
+      }
+    },
+    size: {
+      options: [0, 1], // iterator
+      mapping: ['', 'IssueLabel--big'], // values
+      control: {
+        type: 'select',
+        labels: ['default', 'big'] // public labels
+      },
+      description: 'Size',
+      table: {
+        category: 'CSS'
+      }
+    },
+    text: {
+      name: 'stringExample',
+      type: 'string',
+      description: 'Label text',
+      table: {
+        category: 'HTML'
+      }
+    }
+  }
+}
+
+// build every component case here in the template (private api)
+export const IssueLabelTemplate = ({variant, size, text}) => (
+  <span className={clsx('IssueLabel', 'color-fg-on-emphasis', variant && `${variant}`, size && `${size}`)}>{text}</span>
+)
+
+// create a "playground" demo page that may set some defaults and allow story to access component controls
+export const Playground = IssueLabelTemplate.bind({})
+Playground.args = {
+  text: 'bug 🐛',
+  variant: 'color-bg-accent-emphasis'
+}
diff --git a/docs/src/stories/components/Label/Label.stories.jsx b/docs/src/stories/components/Label/Label.stories.jsx
new file mode 100644
index 0000000000..292dc87915
--- /dev/null
+++ b/docs/src/stories/components/Label/Label.stories.jsx
@@ -0,0 +1,67 @@
+import React from 'react'
+import clsx from 'clsx'
+
+export default {
+  title: 'Components/Label/Label',
+  excludeStories: ['LabelTemplate'],
+  argTypes: {
+    inline: {
+      control: {type: 'boolean'},
+      description: 'Display label inline',
+      table: {
+        category: 'CSS'
+      }
+    },
+    variant: {
+      options: [0, 1, 2, 3, 4, 5], // iterator
+      mapping: [
+        '',
+        'Label--primary',
+        'Label--secondary',
+        'Label--info',
+        'Label--success',
+        'Label--warning',
+        'Label--danger'
+      ], // values
+      control: {
+        type: 'select',
+        labels: ['default', 'primary', 'secondary', 'info', 'success', 'warning', 'danger']
+      },
+      description: 'Colors',
+      table: {
+        category: 'HTML'
+      }
+    },
+    size: {
+      options: [0, 1], // iterator
+      mapping: ['', 'Label--large'], // values
+      control: {
+        type: 'select',
+        labels: ['default', 'large'] // public labels
+      },
+      description: 'Colors',
+      table: {
+        category: 'CSS'
+      }
+    },
+    text: {
+      name: 'text',
+      type: 'string',
+      description: 'Label text',
+      table: {
+        category: 'HTML'
+      }
+    }
+  }
+}
+
+export const LabelTemplate = ({inline, variant, size, text}) => (
+  <span className={clsx('Label', variant && `${variant}`, size && `${size}`, inline && 'Label--inline')}>{text}</span>
+)
+
+export const Playground = LabelTemplate.bind({})
+Playground.args = {
+  text: 'Label text',
+  inline: false,
+  variant: 'Label--primary'
+}
diff --git a/docs/src/stories/components/Label/LabelCounter.stories.jsx b/docs/src/stories/components/Label/LabelCounter.stories.jsx
new file mode 100644
index 0000000000..538755561e
--- /dev/null
+++ b/docs/src/stories/components/Label/LabelCounter.stories.jsx
@@ -0,0 +1,54 @@
+import React from 'react'
+import clsx from 'clsx'
+
+export default {
+  title: 'Components/Label/Counter',
+  excludeStories: ['LabelCounterTemplate'],
+  argTypes: {
+    variant: {
+      options: [0, 1, 2], // iterator
+      mapping: ['', 'Counter--primary', 'Counter--secondary'], // values
+      control: {
+        type: 'select',
+        labels: ['default', 'primary', 'secondary'] // public labels
+      },
+      table: {
+        category: 'CSS'
+      }
+    },
+    text: {
+      name: 'text',
+      type: 'string',
+      description: 'Label text',
+      table: {
+        category: 'HTML'
+      }
+    },
+    icon: {
+      defaultValue: '',
+      name: 'icon',
+      type: 'string',
+      description: 'Paste [Octicon](https://primer.style/octicons/) in control field',
+      table: {
+        category: 'HTML'
+      }
+    }
+  }
+}
+
+// build every component case here in the template (private api)
+export const LabelCounterTemplate = ({variant, text, icon}) => (
+  <span className={clsx('Counter', variant && `${variant}`)}>
+    <>
+      {icon && icon}
+      {text}
+    </>
+  </span>
+)
+
+// create a "playground" demo page that may set some defaults and allow story to access component controls
+export const Playground = LabelCounterTemplate.bind({})
+Playground.args = {
+  text: '23',
+  variant: 'Counter--primary'
+}
diff --git a/docs/src/stories/components/Label/LabelDiffstat.stories.jsx b/docs/src/stories/components/Label/LabelDiffstat.stories.jsx
new file mode 100644
index 0000000000..75fe64a51c
--- /dev/null
+++ b/docs/src/stories/components/Label/LabelDiffstat.stories.jsx
@@ -0,0 +1,47 @@
+import React from 'react'
+
+export default {
+  title: 'Components/Label/Diffstat',
+  excludeStories: ['LabelDiffstatTemplate'],
+  argTypes: {
+    diffValueIntent: {
+      options: [0, 1, 2], // iterator
+      mapping: ['', 'color-fg-success', 'color-fg-danger'], // values
+      control: {
+        type: 'select',
+        labels: ['default', 'success', 'danger'] // public labels
+      },
+      table: {
+        category: 'CSS'
+      }
+    },
+    diffValue: {
+      name: 'diffValue',
+      type: 'string',
+      description: '7',
+      table: {
+        category: 'HTML'
+      }
+    }
+  }
+}
+
+// build every component case here in the template (private api)
+export const LabelDiffstatTemplate = ({diffValue, diffValueIntent}) => (
+  <span class="diffstat tooltipped tooltipped-e" aria-label="6 changes: 3 additions &amp; 3 deletions">
+    {diffValueIntent === 'color-fg-success' && <span class="color-fg-success">+{diffValue}</span>}
+    {diffValueIntent === 'color-fg-danger' && <span class="color-fg-danger">-{diffValue}</span>}
+    {diffValueIntent === '' && diffValue} <span class="diffstat-block-added"></span>
+    <span class="diffstat-block-added"></span>
+    <span class="diffstat-block-deleted"></span>
+    <span class="diffstat-block-deleted"></span>
+    <span class="diffstat-block-neutral"></span>
+  </span>
+)
+
+// create a "playground" demo page that may set some defaults and allow story to access component controls
+export const Playground = LabelDiffstatTemplate.bind({})
+Playground.args = {
+  diffValue: '7',
+  diffValueIntent: ''
+}
diff --git a/docs/src/stories/components/Label/LabelFeatures.stories.jsx b/docs/src/stories/components/Label/LabelFeatures.stories.jsx
new file mode 100644
index 0000000000..0f7d23088f
--- /dev/null
+++ b/docs/src/stories/components/Label/LabelFeatures.stories.jsx
@@ -0,0 +1,72 @@
+import React from 'react'
+import {LabelTemplate} from './Label.stories' // import stories for component compositions
+
+export default {
+  title: 'Components/Label/Label/Features'
+}
+
+export const VariantDefault = LabelTemplate.bind({})
+VariantDefault.storyName = '[Variant] Default'
+VariantDefault.args = {
+  text: 'Label text',
+  inline: false,
+  variant: 'Label--default'
+}
+
+export const VariantPrimary = LabelTemplate.bind({})
+VariantPrimary.storyName = '[Variant] Primary'
+VariantPrimary.args = {
+  text: 'Label text',
+  inline: false,
+  variant: 'Label--primary'
+}
+
+export const VariantInfo = LabelTemplate.bind({})
+VariantInfo.storyName = '[Variant] Info'
+VariantInfo.args = {
+  text: 'Label text',
+  inline: false,
+  variant: 'Label--info'
+}
+
+export const VariantSuccess = LabelTemplate.bind({})
+VariantSuccess.storyName = '[Variant] Success'
+VariantSuccess.args = {
+  text: 'Label text',
+  inline: false,
+  variant: 'Label--success'
+}
+
+export const VariantWarning = LabelTemplate.bind({})
+VariantWarning.storyName = '[Variant] Warning'
+VariantWarning.args = {
+  text: 'Label text',
+  inline: false,
+  variant: 'Label--warning'
+}
+
+export const VariantDanger = LabelTemplate.bind({})
+VariantDanger.storyName = '[Variant] Danger'
+VariantDanger.args = {
+  text: 'Label text',
+  inline: false,
+  variant: 'Label--danger'
+}
+
+export const AllVariants = ({}) => (
+  <>
+    <LabelTemplate text="Default" variant="Label--default" />
+    <LabelTemplate text="Primary" variant="Label--primary" />
+    <LabelTemplate text="Info" variant="Label--info" />
+    <LabelTemplate text="Success" variant="Label--success" />
+    <LabelTemplate text="Warning" variant="Label--warning" />
+    <LabelTemplate text="Danger" variant="Label--danger" />
+  </>
+)
+AllVariants.decorators = [
+  Story => (
+    <div style={{display: 'flex', gap: '0.5rem'}}>
+      <Story />
+    </div>
+  )
+]
diff --git a/docs/src/stories/components/Label/LabelStates.stories.jsx b/docs/src/stories/components/Label/LabelStates.stories.jsx
new file mode 100644
index 0000000000..93d5643955
--- /dev/null
+++ b/docs/src/stories/components/Label/LabelStates.stories.jsx
@@ -0,0 +1,66 @@
+import React from 'react'
+import clsx from 'clsx'
+
+export default {
+  title: 'Components/Label/States',
+  excludeStories: ['LabelStatesTemplate'],
+  argTypes: {
+    state: {
+      options: [0, 1, 2, 3, 4], // iterator
+      mapping: ['', 'State--draft', 'State--open', 'State--merged', 'State--closed'], // values
+      control: {
+        type: 'select',
+        labels: ['default', 'draft', 'open', 'merged', 'closed'] // public labels
+      },
+      // description: 'Colors & icons',
+      table: {
+        category: 'CSS'
+      }
+    },
+    size: {
+      options: [0, 1], // iterator
+      mapping: ['', 'State--small'], // values
+      control: {
+        type: 'select',
+        labels: ['default', 'small'] // public labels
+      },
+      description: 'Size',
+      table: {
+        category: 'CSS'
+      }
+    },
+    text: {
+      name: 'text',
+      type: 'string',
+      description: 'Label text',
+      table: {
+        category: 'HTML'
+      }
+    },
+    icon: {
+      defaultValue: '',
+      name: 'icon',
+      type: 'string',
+      description: 'Paste [Octicon](https://primer.style/octicons/) in control field',
+      table: {
+        category: 'HTML'
+      }
+    }
+  }
+}
+
+// build every component case here in the template (private api)
+export const LabelStatesTemplate = ({state, size, text, icon}) => (
+  <span className={clsx('State', state && `${state}`, size && `${size}`)}>
+    <>
+      {icon && <span dangerouslySetInnerHTML={{__html: icon}} />} {text}
+    </>
+  </span>
+)
+
+// create a "playground" demo page that may set some defaults and allow story to access component controls
+export const Playground = LabelStatesTemplate.bind({})
+Playground.args = {
+  text: 'Draft',
+  state: 'State--draft'
+}
diff --git a/docs/src/stories/components/Label/LabelStatesFeatures.stories.jsx b/docs/src/stories/components/Label/LabelStatesFeatures.stories.jsx
new file mode 100644
index 0000000000..6adf106e6d
--- /dev/null
+++ b/docs/src/stories/components/Label/LabelStatesFeatures.stories.jsx
@@ -0,0 +1,66 @@
+import React from 'react'
+import {LabelStatesTemplate} from './LabelStates.stories' // import stories for component compositions
+
+export default {
+  title: 'Components/Label/States/Features'
+}
+
+export const VariantDefault = LabelStatesTemplate.bind({})
+VariantDefault.storyName = '[State] Default'
+VariantDefault.args = {
+  text: 'Label text',
+  inline: false,
+  state: ''
+}
+
+export const VariantDraft = LabelStatesTemplate.bind({})
+VariantDraft.storyName = '[State] Draft'
+VariantDraft.args = {
+  text: 'Label text',
+  inline: false,
+  state: 'State--draft'
+}
+
+export const VariantOpen = LabelStatesTemplate.bind({})
+VariantOpen.storyName = '[State] Open'
+VariantOpen.args = {
+  text: 'Label text',
+  inline: false,
+  state: 'State--open',
+  icon: `<svg class="octicon octicon-git-pull-request" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" class="css-5lyks0">  <path fill-rule="evenodd" clip-rule="evenodd" d="M7.17674 3.07322L9.57318 0.676753C9.73068 0.51926 9.99996 0.630802 9.99996 0.853529V5.64642C9.99996 5.86915 9.73068 5.98069 9.57319 5.8232L7.17674 3.42677C7.07911 3.32914 7.07911 3.17085 7.17674 3.07322ZM3.75 2.5C3.33579 2.5 3 2.83579 3 3.25C3 3.66421 3.33579 4 3.75 4C4.16421 4 4.5 3.66421 4.5 3.25C4.5 2.83579 4.16421 2.5 3.75 2.5ZM1.5 3.25C1.5 2.00736 2.50736 1 3.75 1C4.99264 1 6 2.00736 6 3.25C6 4.22966 5.37389 5.06309 4.5 5.37197V10.628C5.37389 10.9369 6 11.7703 6 12.75C6 13.9926 4.99264 15 3.75 15C2.50736 15 1.5 13.9926 1.5 12.75C1.5 11.7703 2.12611 10.9369 3 10.628V5.37197C2.12611 5.06309 1.5 4.22966 1.5 3.25ZM11 2.5H10V4H11C11.5523 4 12 4.44772 12 5V10.628C11.1261 10.9369 10.5 11.7703 10.5 12.75C10.5 13.9926 11.5074 15 12.75 15C13.9926 15 15 13.9926 15 12.75C15 11.7703 14.3739 10.9369 13.5 10.628V5C13.5 3.61929 12.3807 2.5 11 2.5ZM12 12.75C12 12.3358 12.3358 12 12.75 12C13.1642 12 13.5 12.3358 13.5 12.75C13.5 13.1642 13.1642 13.5 12.75 13.5C12.3358 13.5 12 13.1642 12 12.75ZM3.75 12C3.33579 12 3 12.3358 3 12.75C3 13.1642 3.33579 13.5 3.75 13.5C4.16421 13.5 4.5 13.1642 4.5 12.75C4.5 12.3358 4.16421 12 3.75 12Z"></path></svg>`
+}
+
+export const VariantMerged = LabelStatesTemplate.bind({})
+VariantMerged.storyName = '[State] Merged'
+VariantMerged.args = {
+  text: 'Label text',
+  inline: false,
+  state: 'State--merged',
+  icon: `<svg class="octicon octicon-git-merge" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" class="css-5lyks0">  <path fill-rule="evenodd" clip-rule="evenodd" d="M5 3.254V3.25V3.255C4.99934 3.45369 4.91985 3.64401 4.779 3.78415C4.63815 3.9243 4.44745 4.00283 4.24875 4.0025C4.05006 4.00217 3.85961 3.923 3.71923 3.78239C3.57885 3.64177 3.5 3.45119 3.5 3.2525C3.5 3.0538 3.57885 2.86323 3.71923 2.72261C3.85961 2.58199 4.05006 2.50283 4.24875 2.5025C4.44745 2.50217 4.63815 2.5807 4.779 2.72084C4.91985 2.86099 4.99934 3.0513 5 3.25V3.254ZM5.45 5.154C5.88079 4.8824 6.2067 4.47269 6.37445 3.99186C6.54221 3.51102 6.54188 2.9875 6.37353 2.50687C6.20517 2.02624 5.87875 1.61694 5.44762 1.34588C5.01649 1.07483 4.50616 0.95804 4.00005 1.01462C3.49394 1.0712 3.022 1.2978 2.66137 1.65737C2.30074 2.01695 2.07276 2.48822 2.0147 2.99416C1.95664 3.5001 2.07193 4.01077 2.34173 4.4427C2.61152 4.87462 3.01987 5.20224 3.5 5.372V10.628C2.99931 10.8049 2.57729 11.1532 2.30855 11.6112C2.0398 12.0692 1.94163 12.6075 2.03139 13.1309C2.12114 13.6542 2.39305 14.1291 2.79904 14.4713C3.20503 14.8136 3.71897 15.0014 4.25 15.0014C4.78103 15.0014 5.29496 14.8136 5.70095 14.4713C6.10695 14.1291 6.37885 13.6542 6.46861 13.1309C6.55837 12.6075 6.4602 12.0692 6.19145 11.6112C5.9227 11.1532 5.50069 10.8049 5 10.628V7.123C5.53827 7.71503 6.19447 8.18788 6.92641 8.51114C7.65836 8.8344 8.44985 9.00093 9.25 9H10.628C10.8049 9.50069 11.1532 9.9227 11.6112 10.1915C12.0692 10.4602 12.6075 10.5584 13.1309 10.4686C13.6542 10.3789 14.1291 10.1069 14.4713 9.70096C14.8136 9.29496 15.0014 8.78103 15.0014 8.25C15.0014 7.71897 14.8136 7.20503 14.4713 6.79904C14.1291 6.39305 13.6542 6.12114 13.1309 6.03139C12.6075 5.94163 12.0692 6.0398 11.6112 6.30855C11.1532 6.57729 10.8049 6.99931 10.628 7.5H9.25C8.4613 7.50006 7.68813 7.28066 7.01702 6.86634C6.34592 6.45202 5.80334 5.85912 5.45 5.154ZM12.75 9C12.9489 9 13.1397 8.92098 13.2803 8.78033C13.421 8.63968 13.5 8.44891 13.5 8.25C13.5 8.05109 13.421 7.86032 13.2803 7.71967C13.1397 7.57902 12.9489 7.5 12.75 7.5C12.5511 7.5 12.3603 7.57902 12.2197 7.71967C12.079 7.86032 12 8.05109 12 8.25C12 8.44891 12.079 8.63968 12.2197 8.78033C12.3603 8.92098 12.5511 9 12.75 9ZM4.25 13.5C4.44891 13.5 4.63968 13.421 4.78033 13.2803C4.92098 13.1397 5 12.9489 5 12.75C5 12.5511 4.92098 12.3603 4.78033 12.2197C4.63968 12.079 4.44891 12 4.25 12C4.05109 12 3.86032 12.079 3.71967 12.2197C3.57902 12.3603 3.5 12.5511 3.5 12.75C3.5 12.9489 3.57902 13.1397 3.71967 13.2803C3.86032 13.421 4.05109 13.5 4.25 13.5Z"></path></svg>`
+}
+
+export const VariantClosed = LabelStatesTemplate.bind({})
+VariantClosed.storyName = '[State] Closed'
+VariantClosed.args = {
+  text: 'Label text',
+  inline: false,
+  state: 'State--closed',
+  icon: `<svg class="octicon octicon-git-pull-request" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" class="css-5lyks0">  <path fill-rule="evenodd" clip-rule="evenodd" d="M7.17674 3.07322L9.57318 0.676753C9.73068 0.51926 9.99996 0.630802 9.99996 0.853529V5.64642C9.99996 5.86915 9.73068 5.98069 9.57319 5.8232L7.17674 3.42677C7.07911 3.32914 7.07911 3.17085 7.17674 3.07322ZM3.75 2.5C3.33579 2.5 3 2.83579 3 3.25C3 3.66421 3.33579 4 3.75 4C4.16421 4 4.5 3.66421 4.5 3.25C4.5 2.83579 4.16421 2.5 3.75 2.5ZM1.5 3.25C1.5 2.00736 2.50736 1 3.75 1C4.99264 1 6 2.00736 6 3.25C6 4.22966 5.37389 5.06309 4.5 5.37197V10.628C5.37389 10.9369 6 11.7703 6 12.75C6 13.9926 4.99264 15 3.75 15C2.50736 15 1.5 13.9926 1.5 12.75C1.5 11.7703 2.12611 10.9369 3 10.628V5.37197C2.12611 5.06309 1.5 4.22966 1.5 3.25ZM11 2.5H10V4H11C11.5523 4 12 4.44772 12 5V10.628C11.1261 10.9369 10.5 11.7703 10.5 12.75C10.5 13.9926 11.5074 15 12.75 15C13.9926 15 15 13.9926 15 12.75C15 11.7703 14.3739 10.9369 13.5 10.628V5C13.5 3.61929 12.3807 2.5 11 2.5ZM12 12.75C12 12.3358 12.3358 12 12.75 12C13.1642 12 13.5 12.3358 13.5 12.75C13.5 13.1642 13.1642 13.5 12.75 13.5C12.3358 13.5 12 13.1642 12 12.75ZM3.75 12C3.33579 12 3 12.3358 3 12.75C3 13.1642 3.33579 13.5 3.75 13.5C4.16421 13.5 4.5 13.1642 4.5 12.75C4.5 12.3358 4.16421 12 3.75 12Z"></path></svg>`
+}
+
+export const AllVariants = ({}) => (
+  <>
+    <LabelStatesTemplate text="Default" state="" />
+    <LabelStatesTemplate text="Draft" state="State--draft" />
+    <LabelStatesTemplate text="Open" state="State--open" />
+    <LabelStatesTemplate text="Merged" state="State--merged" />
+    <LabelStatesTemplate text="Closed" state="State--closed" />
+  </>
+)
+AllVariants.decorators = [
+  Story => (
+    <div style={{display: 'flex', gap: '0.5rem'}}>
+      <Story />
+    </div>
+  )
+]