# Props and Controls — Storybook: Component-Driven UI Development

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

> Use args, argTypes and the Controls addon to edit component props live and explore every configuration without new stories.

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