64 lines
1.8 KiB
TypeScript
64 lines
1.8 KiB
TypeScript
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' },
|
|
className: { 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' },
|
|
};
|