design system token v0.6.1

stories/Primitives/Badge.stories.tsx

@@ -28,6 +28,10 @@ const meta = {
         'platform',
       ],
     },
+    size: {
+      control: 'select',
+      options: ['sm', 'default', 'lg'],
+    },
   },
 } satisfies Meta<typeof Badge>
 
@@ -168,3 +172,52 @@ export const AllVariants: Story = {
     </div>
   ),
 }
+
+export const SizeSmall: Story = {
+  args: {
+    children: 'Small',
+    variant: 'secondary',
+    size: 'sm',
+  },
+}
+
+export const SizeDefault: Story = {
+  args: {
+    children: 'Default',
+    variant: 'secondary',
+    size: 'default',
+  },
+}
+
+export const SizeLarge: Story = {
+  args: {
+    children: 'Large',
+    variant: 'default',
+    size: 'lg',
+  },
+}
+
+export const AllSizes: Story = {
+  render: () => (
+    <div className="flex flex-col gap-6">
+      <div className="flex items-center gap-3">
+        <span className="w-20 text-sm text-muted-foreground font-sans">sm</span>
+        <Badge variant="secondary" size="sm">dense</Badge>
+        <Badge variant="success" size="sm">12 new</Badge>
+        <Badge variant="muted" size="sm">draft</Badge>
+      </div>
+      <div className="flex items-center gap-3">
+        <span className="w-20 text-sm text-muted-foreground font-sans">default</span>
+        <Badge variant="default" size="default">Active</Badge>
+        <Badge variant="success" size="default">Published</Badge>
+        <Badge variant="warning" size="default">Pending</Badge>
+      </div>
+      <div className="flex items-center gap-3">
+        <span className="w-20 text-sm text-muted-foreground font-sans">lg</span>
+        <Badge variant="default" size="lg">New feature</Badge>
+        <Badge variant="info" size="lg">Beta</Badge>
+        <Badge variant="success" size="lg">Available</Badge>
+      </div>
+    </div>
+  ),
+}