# Props और Controls — Storybook: Component-Driven UI Development

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

> Args, argTypes और Controls addon से component props live बदलें और नई stories लिखे बिना हर configuration explore करें।

## 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 type { Meta, StoryObj } from '@storybook/react';
import { Button } from './Button';

const meta = {
  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' },
  },
} satisfies Meta<typeof Button>;
export default meta;

export const Interactive: StoryObj<typeof meta> = {
  args: { variant: 'primary', size: 'medium', children: 'Click me' },
};
```

## 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' },
}
```