# Props और Controls — Storybook

Source: https://www.geekswithgeeks.com/hi/storybook/sb-props-controls

> Component props और configurations को dynamically test करने के लिए controls का use करें।

## Controls addon

Controls addon आपको Storybook UI में component props को real-time में edit करने देता है। यह आपको test करने में मदद करता है कि component विभिन्न prop values के लिए कैसे respond करता है बिना नई stories लिखे।

## Controls के साथ Button

Prop types define करें और Storybook में automatic controls देखें।

```tsx
import { Button } from './Button';

export default {
  component: Button,
  title: 'Components/Button',
  argTypes: {
    variant: {
      options: ['primary', 'secondary', 'danger'],
      control: { type: 'radio' },
    },
    size: {
      options: ['small', 'medium', 'large'],
      control: { type: 'select' },
    },
    disabled: { control: 'boolean' },
  },
};

export const Interactive = (args) => <Button {...args}>Click me</Button>;
Interactive.args = { variant: 'primary', size: 'medium' };
```

## Args और argTypes

`args` आपके component को pass किए जाने वाले props हैं, और `argTypes` define करते हैं कि controls कैसे render होने चाहिए। एक साथ वे interactive story development को enable करते हैं।

## Advanced control types

Complex prop values के लिए date pickers, color pickers, और array inputs जैसे specialized control types का use करें।

```tsx
argTypes: {
  backgroundColor: { control: 'color' },
  date: { control: 'date' },
  tags: { control: 'object' },
}
```