Explore Component Interfaces with Storybook Controls

[00:00] In Storybook, we can interactively explore and stress test components with controls. Controls turns every story into a component playground. To use controls, click the shortcut cog and make sure that show add ons is enabled. Then just make sure that controls is focused in the add ons panel. Storybook provides controls for every component [00:19] arg. So we have a primary arg which can be boolean true or false. A label arg which accepts a string. Background color, which takes a color. We can use this cool color picker for that. And size, which is innumerable represented by this radio button. Storybook automatically generates controls [00:39] for any component that uses the c s f three object syntax as you see here. ARGs are defined on a story and applied it to the component that's defined in component meta which we'll learn about later on. Unlike just rendering a component with the props applied, this arc system [00:59] involves storybook allowing it to know what types of controls it should use for these interfaces. With controls, more teammates can get involved in the component driven development process, helping do a QA, stress test, and communicate about designs together.