# Variants और States — Storybook

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

> Multiple stories और controls का use करके सभी component variants और states को test करें।

## Component variants

Variants एक component के विभिन्न visual या behavioral versions हैं। Storybook में उन्हें document करने से developers और designers सभी options को एक नज़र में देख सकते हैं।

## Stories में कई variants

प्रत्येक significant variant या state के लिए अलग stories create करें।

```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>;
```

## Edge cases को test करना

Empty states, loading, error, और disabled states जैसे edge cases के लिए stories create करें। ये stories एक living documentation और regression test suite के रूप में काम करते हैं।

## Size और spacing variants

अपने application में consistency ensure करने के लिए सभी size और spacing variations को document करें।

```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>;
```