React Academy · Lesson

Args, Controls & the Actions Addon

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

Args, Controls & the Actions Addon is a free React Academy lesson on CoddyKit — lesson 3 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the React Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

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,
  },
};

The Controls Panel

When args are defined, Storybook renders interactive controls in the Controls panel below the canvas. Changing a control rerenders the story with new props — no code changes needed.

ArgTypes for Control Customization

Use argTypes in the meta to customize how a prop appears in Controls: type, options, description, and default value.

const meta: Meta<typeof Button> = {
  component: Button,
  argTypes: {
    variant: {
      control: 'select',
      options: ['primary', 'secondary', 'danger'],
      description: 'Visual style of the button',
    },
    size: {
      control: { type: 'radio' },
      options: ['small', 'medium', 'large'],
    },
    disabled: { control: 'boolean' },
    label: { control: 'text' },
  },
};

Hiding Args from Controls

Set control: false in argTypes to hide a prop from the Controls panel — useful for internal props or functions.

argTypes: {
  onClick: { control: false },
  className: { table: { disable: true } },
},

The Actions Addon

The Actions addon (part of addon-essentials) logs prop function calls in the Actions panel. Use fn() from @storybook/test to create spy functions that show in the panel.

import { fn } from '@storybook/test';

const meta: Meta<typeof Button> = {
  component: Button,
  args: {
    onClick: fn(),     // click events appear in Actions panel
    onHover: fn(),
  },
};

Auto-Wiring Actions with argTypes

Use argTypes: { onClick: { action: 'clicked' } } to auto-create an action handler without importing fn().

const meta: Meta<typeof Select> = {
  component: Select,
  argTypes: {
    onChange: { action: 'changed' },
    onBlur: { action: 'blurred' },
  },
};

Global Args

Set args in preview.ts to apply them to all stories globally — useful for theming, locale, or viewport args that affect every component.

// .storybook/preview.ts
export const globalTypes = {
  locale: {
    description: 'Internationalization locale',
    defaultValue: 'en',
    toolbar: {
      icon: 'globe',
      items: ['en', 'fr', 'de'],
    },
  },
};

Storybook Toolbar

Global args with toolbar config appear as buttons in the Storybook toolbar, letting you switch themes, locales, or breakpoints globally.

Args Composition

Spread args from another story to build on it. This reduces duplication when creating variant stories.

export const Primary: Story = {
  args: { label: 'Save', variant: 'primary' },
};

export const PrimaryLoading: Story = {
  args: { ...Primary.args, loading: true },
};

export const PrimaryDisabled: Story = {
  args: { ...Primary.args, disabled: true },
};

Mapping Control Values

Use mapping in argTypes to map human-readable control options to actual prop values (e.g., icons or components).

argTypes: {
  icon: {
    options: ['Star', 'Heart', 'None'],
    mapping: { Star: <StarIcon />, Heart: <HeartIcon />, None: null },
    control: { type: 'select' },
  },
},

Quick Check

What does the fn() function from @storybook/test do when used as a story arg?

Recap

Args power both the Controls panel (live prop editor) and the Actions addon (event logger). Define arg types with argTypes for richer controls, use fn() from @storybook/test for action logging, and compose args across stories to reduce duplication.

Frequently asked questions

Is the “Args, Controls & the Actions Addon” lesson free?

Yes — the full text of “Args, Controls & the Actions Addon” is free to read here on the web, and the React Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the React Academy course, upgrade to CoddyKit PRO.

What will I learn in “Args, Controls & the Actions Addon”?

Use args to make stories interactive and the actions addon to log component events. You practise React Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start React Academy?

No prior experience is required. React Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 3 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Args, Controls & the Actions Addon” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this React Academy lesson?

Yes. Every React Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to React Academy