feat: storybook

src/stories/Button.stories.tsx

@@ -0,0 +1,62 @@
+import type { Meta, StoryObj } from 'storybook-react-rsbuild';
+import { Button } from '../components/ui';
+
+const meta = {
+  title: 'Inputs/Button',
+  component: Button,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'Tactile push button. Four variants and an optional small size; everything else is a native `<button>`, so all standard button props pass through.',
+      },
+    },
+  },
+  argTypes: {
+    variant: {
+      control: 'inline-radio',
+      options: ['key', 'primary', 'ember', 'ghost'],
+      description: 'Visual emphasis. `key` is the default neutral button.',
+    },
+    size: {
+      control: 'inline-radio',
+      options: [undefined, 'sm'],
+      description: 'Omit for default; `sm` for the compact size.',
+    },
+    iconOnly: { control: 'boolean', description: 'Square padding for a single glyph.' },
+    disabled: { control: 'boolean' },
+    children: { control: 'text' },
+  },
+  args: { children: 'Button', variant: 'key' },
+} satisfies Meta<typeof Button>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {};
+
+export const Variants: Story = {
+  render: () => (
+    <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
+      <Button variant="key">Key</Button>
+      <Button variant="primary">Primary</Button>
+      <Button variant="ember">Ember</Button>
+      <Button variant="ghost">Ghost</Button>
+    </div>
+  ),
+};
+
+export const Sizes: Story = {
+  render: () => (
+    <div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
+      <Button variant="primary">Default</Button>
+      <Button variant="primary" size="sm">
+        Small
+      </Button>
+    </div>
+  ),
+};
+
+export const Disabled: Story = {
+  args: { disabled: true, variant: 'primary', children: 'Disabled' },
+};