0PricingLogin▼
React Academy · Lesson

Args, Controls & the Actions Addon

Use args to make stories interactive and the actions addon to log component events.

What Are Args?

Args are the inputs (props) to a story. Storybook uses the args object to render the component and power the Controls panel — a live prop editor in the Storybook UI.

Defining Args

Set args in the story object. Storybook infers the control type from the TypeScript prop type.

export const Primary: Story = {
  args: {
    label: 'Click me',
    variant: 'primary',
    size: 'medium',
    disabled: false,
  },
};

All lessons in this course

  1. Setting Up Storybook in a React Project
  2. Writing CSF3 Stories
  3. Args, Controls & the Actions Addon
  4. Storybook Testing & Visual Regression
← Back to React Academy