# Props and Controls — Storybook

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

> Use controls to dynamically test component props and configurations.

## Controls addon

The Controls addon lets you edit component props in real-time in the Storybook UI. This helps you test how the component responds to different prop values without writing new stories.

## Button with controls

Define prop types and see automatic controls in Storybook.

```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 and argTypes

`args` are the props passed to your component, and `argTypes` define how controls should render. Together they enable interactive story development.

## Advanced control types

Use specialized control types like date pickers, color pickers, and array inputs for complex prop values.

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