Storybook args

What are args?

“Args” are Storybook’s mechanism for defining the set of arguments that define how the component should render.

Args can be defined for all stories:

// Button.stories.js|jsx

import { Button } from './Button';

export default {
  title: 'Button',
  component: Button,
  //👇 Creates specific argTypes
  argTypes: {
    disabled: { control: 'boolean' },
    variant: { control: 'select', options: ['primary', 'secondary'] },
  },
  args: {
    //👇 Default values
    disabled: false,
    variant: 'primary',
  },
};

or defined for a single story:

import { Button } from './Button';

export default {
  title: 'Button',
  component: Button,
};

export const Playground = {
  //👇 Creates specific argTypes
  argTypes: {
    disabled: { control: 'boolean' },
    variant: { control: 'select', options: ['primary', 'secondary'] },
  },
  //👇 Default values
  args: {
    disabled: false,
    variant: 'primary',
  },
};

Learn more about args on Storybook’s documentation

When to use argTypes

On some frameworks, Storybook can infer argTypes automatically from types (in TypeScript) or PropTypes (in JavaScript).

story.to.design needs argTypes to infer possible values for a specific arg when using the Basic mode for importing variants but it’s also used in some cases of Advanced mode. See variantProperties API for more details.

Supported argTypes

When importing in Basic mode, the arg with the following types will be presented to the user of story.to.design for creating variants.

(*) When the arg’s type is number (for range) or string (for color), as Storybook usually infers from your TypeScript types or PropTypes, or as set with type in argTypes.

Text and number args have no list of options: add the values you want as variants yourself when editing the property.