ArgsTable

Storybook Docs automatically generates component args tables for components in supported frameworks. These tables list the arguments (args for short) of the component, and even integrate with controls to allow you to change the args of the currently rendered story.

This is extremely useful, but it can be further expanded. Additional information can be added to the component to better document it:

The args tables will be updated accordingly by including the additional information (e.g., JSDocs comments), offering a richer experience for any stakeholders involved.

Working with the DocsPage

To use the ArgsTable in DocsPage, export a component property on your stories metadata:

Working with MDX

If you need, you can also include the ArgsTable block in your MDX stories. Below is a condensed table of available options and examples:

OptionDescription
ofInfers the args table from the component.
<ArgsTable of={MyComponent} />
storyInfers the args table based on a story.
<ArgsTable story="example-mycomponent--my-story" />

Customizing

ArgsTables are generated based on an internal data structure called ArgTypes. When you define the component's metadata element in your story, Storybook's Docs will automatically extract the ArgTypes based on available properties.

If you need, you can customize what is displayed in the ArgsTable by extending the ArgTypes data, unless you're using the ArgsTable of={component} />. In this case, Storybook will infer the data automatically from the component.

Below is an abridged table and example featuring the available options.

FieldDescription
nameThe name of the property.
argTypes: { label: {} }
type.nameSets a type for the property.
argTypes: { label: { name: 'number' } }
type.requiredSets the property as optional or required.
argTypes: { label: { type: { required: true } }
descriptionSets a Markdown description for the property.
argTypes: { label: { description: 'Something' } }
table.type.summaryProvide a short version of the type.
argTypes: { label: { table: { type: { summary: 'a short summary' } }}}
table.type.detailProvides an extended version of the type.
argTypes: { label: { table: { type: { detail: 'something' } }}}
table.defaultValue.summaryProvide a short version of the default value.
argTypes: { label: { table: { defaultValue: { summary: 'Hello World' } }}}
table.defaultValue.detailProvides a longer version of the default value.
argTypes: { label: { table: { defaultValue: { detail: 'Something' } }}}
controlAssociates a control for the property.
argTypes: { label: { control: { type: 'text'} } }
Read the Essentials documentation to learn more about controls.

๐Ÿ’ก This API is experimental and may change outside the typical semver release cycle. Read the documentation to learn more about ArgTypes.

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

Shorthands

To reduce the boilerplate code you have to write, Storybook provides some convenient shorthands to help you streamline your work. Below are some of the available shorthands.

TypeShorthand
type.nameAssigns the type to a number property.
argTypes: { label: { type: number }
control.typeAssigns a radio control for the property.
argTypes: { size: { control: 'radio' } }

Grouping

You can also extend the ArgsTable's customization by grouping related argTypes into categories or even subcategories. Based on the following component implementation:

You could group similar properties for better organization and structure. Using the table below as a reference:

FieldCategory
backgroundColorColors
primaryColors
labelText
onClickEvents
sizeSizes

Results in the following change into your story and UI.

button story with args grouped into categories

You can also extend the formula above and introduce subcategories, allowing better structuring and organization. Using the table below as a reference leads to the following change to your story and UI:

FieldCategorySubcategory
backgroundColorColorsButton colors
primaryColorsButton style
labelTextButton contents
onClickEventsButton Events
sizeSizes

button story with args grouped into categories

Controls

The controls inside an ArgsTable are configured in exactly the same way as the controls addon pane. Youโ€™ll probably notice the table is very similar! It uses the same component and mechanism behind the scenes.