Explore Component Interfaces with Storybook Controls
In Storybook, we can interactively explore and stress-test components with Storybook Controls.
- Open a
- Click the Shortcuts cog to ensure that the Addons Panel is visible.
- Finally, focus the Controls Addon.
Storybook provides a UI control for every component arg. We can use these to explore different outcomes.
- Change the boolean
primaryarg with this toggle control.
- Change the string
labelarg with this text input control.
- We can even change
background-colorarg with a color picker control.
[screen: visually track this section]
Storybook automatically generates Controls for stories that use the CSF3 object syntax.
In this format,
args are defined on a story are applied to the component defined in component meta.
Unlike rendering a component and passing props directly to it,
args involve Storybook — giving us Controls for free.
With controls, more teammates can become part of the component development and QA process — building more robust components together.