Version:
Framework:

ArgTypes

This API is experimental and may change outside of the typical semver release cycle

ArgTypes are a first-class feature in Storybook for specifying the behaviour of Args. By specifying the type of an arg, you constrain the values that it can take and provide information about args that are not explicitly set (i.e., not required).

You can also use argTypes to β€œannotate” args with information used by addons that make use of those args. For instance, to instruct the controls addon to render a color, you could choose a string-valued arg.

The most concrete realization of argTypes is the Args Table doc block. Each row in the table corresponds to a single argType and the current value of that arg.

Storybook inferring automatically the argType

Automatic argType inference

If you are using the Storybook docs addon (installed by default as part of essentials), then Storybook will infer a set of argTypes for each story based on the component specified in the default export of the CSF file.

To do so, Storybook uses various static analysis tools depending on your framework.

The format of the generated argType will look something like this:

This ArgTypes data structure, name, type, defaultValue, and description are standard fields in all ArgTypes (analogous to PropTypes in React). The table and control fields are addon-specific annotations. So, for example, the table annotation provides extra information to customize how the label gets rendered, and the control annotation includes additional information for the control editing the property.

πŸ’‘ The @storybook/addon-docs provide a shorthand for common tasks:

  • type: 'number' is shorthand for type: { name: 'number' }
  • control: 'radio' is shorthand for control: { type: 'radio' }

Manual specification

If you want more control over the args table or any other aspect of using argTypes, you can overwrite the generated argTypes for your component on a per-arg basis. For instance, with the above-inferred argTypes and the following default export:

The values.description, table.type, and controls.type are merged into the defaults extracted by Storybook. The final merged values would be:

In particular, this would render a row with a modified description, a type display with a dropdown that shows the detail, and no control.

πŸ’‘ As with other Storybook properties (e.g., args, decorators), you can also override ArgTypes per story basis.

Using argTypes in addons

If you want to access the argTypes of the current component inside an addon, you can use the useArgTypes hook from the @storybook/api package:

Docs
Documentation
Add Storybook to your project in less than a minute to build components faster and easier.
Tutorial
Tutorials
Learn Storybook with in-depth tutorials that teaches Storybook best practices. Follow along with code samples.
Storybook
The MIT License (MIT). Website design by @domyen and the awesome Storybook community.
Subscribe
Get news, free tutorials, and Storybook tips emailed to you.

Maintained by
Chromatic
Continuous integration by
CircleCI
Hosting by
Netlify