# Variants and States — Storybook

Source: https://www.geekswithgeeks.com/en/storybook/sb-variants-states

> Test all component variants and states using multiple stories and controls.

## 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.

```tsx
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.

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