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

Backgrounds

The backgrounds toolbar item allows you to adjust the background that your story is rendered on via Storybook’s UI:

Configuration

By default, the background toolbar presents you with a light and dark background.

But you're not restricted to these two backgrounds, you can configure your own set of colors with the parameters.backgrounds parameter in your .storybook/preview.js:

You can also set backgrounds on per-story or per-component basis by using parameter inheritance:

You can also only override a single key on the background parameter, for instance to set a different default value for a single story:

If you want to disable backgrounds in a story, you can do so by setting the backgrounds parameter like so:

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,565 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