New
You're viewing older docs for version 7.6. View latest docs

Parameters

Watch a video tutorial on the Storybook channel

Parameters are a set of static, named metadata about a story, typically used to control the behavior of Storybook features and addons.

Available parameters are listed in the parameters API reference.

For example, let’s customize the backgrounds addon via a parameter. We’ll use parameters.backgrounds to define which backgrounds appear in the backgrounds toolbar when a story is selected.

Story parameters

We can set a parameter for a single story with the parameters key on a CSF export:

Component parameters

We can set the parameters for all stories of a component using the parameters key on the default CSF export:

Global parameters

We can also set the parameters for all stories via the parameters export of your .storybook/preview.js file (this is the file where you configure all stories):

Setting a global parameter is a common way to configure addons. With backgrounds, you configure the list of backgrounds that every story can render in.

Rules of parameter inheritance

The way the global, component and story parameters are combined is:

  • More specific parameters take precedence (so a story parameter overwrites a component parameter which overwrites a global parameter).
  • Parameters are merged so keys are only ever overwritten, never dropped.

The merging of parameters is important. It means it is possible to override a single specific sub-parameter on a per-story basis but still retain the majority of the parameters defined globally.

If you are defining an API that relies on parameters (e.g. an addon) it is a good idea to take this behavior into account.

Was this page helpful?

Markdown accepted ([link text](url), _italic_, **bold**, etc). Your anonymous feedback will be posted publicly on GitHub.

✍️ Edit on GitHub – PRs welcome!
Storybook
Join the community
6,616 developers and counting
WhyWhy StorybookComponent-driven UI
DocsGuidesTutorialsChangelogTelemetryStatus
CommunityAddonsGet involvedBlog
ShowcaseExploreProjectsComponent glossary
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI