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).

If you want to control the exact range of variants available to story.to.design, then argTypes is recommended to be used.

Supported argTypes

The following args will be presented to the user of story.to.design for creating variants. See Variants for the user experience.

DataTypeControlSupportExample
booleanbooleanβœ…argTypes:
{ active: { control: 'boolean' }}
enumradioβœ…argTypes: { variant: { control: 'radio', options: ['primary', 'secondary'] }}
inline-radioβœ…argTypes: { variant: { control: 'inline-radio', options: ['primary', 'secondary'] }}
checkβœ…argTypes: { variant: { control: 'check', options: ['primary', 'secondary'] }}
inline-checkβœ…argTypes: { variant: { control: 'inline-check', options: ['primary', 'secondary'] }}
selectβœ…argTypes: { variant: { control: 'select', options: ['primary', 'secondary'] }}
multi-selectβœ…argTypes: { variant: { control: 'multi-select', options: ['primary', 'secondary'] }}
numbernumber❌
range❌
stringtext❌
color❌
date❌
objectobject❌
arrayobject❌
file❌

If args are not defined properly in your story, story.to.design will show No args found.

If args are defined properly but none of them are supported, story.to.design will show No supported args found.