Variants and States

Component variants

Variants are different visual or behavioral versions of a component. Documenting them in Storybook helps developers and designers see all options at a glance.

Multiple variants in stories

Create separate stories for each significant variant or state.

import { Button } from './Button';

export default {
  component: Button,
  title: 'Components/Button',
};

export const Primary = () => <Button variant="primary">Primary</Button>;
export const Secondary = () => <Button variant="secondary">Secondary</Button>;
export const Danger = () => <Button variant="danger">Danger</Button>;
export const Loading = () => <Button loading>Loading...</Button>;
export const Disabled = () => <Button disabled>Disabled</Button>;

Testing edge cases

Create stories for edge cases like empty states, loading, error, and disabled states. These stories act as a living documentation and regression test suite.

Size and spacing variants

Document all size and spacing variations to ensure consistency across your application.

export const Small = () => <Button size="small">Small</Button>;
export const Medium = () => <Button size="medium">Medium</Button>;
export const Large = () => <Button size="large">Large</Button>;