Props and Controls

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.

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.

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