Create Engaging Component Playgrounds with Args and Controls

[00:00] When we define stories with CSF object syntax, we get controls for free. Remember just go into our settings cog and enable show add ons anytime you have a story selected. From there, we just click on the controls tab to see all of the interactive controls we have for this button. This happens because we provided our button [00:20] component via component meta to Storybook and it knows how to map the args of our story as props to that button for all of these stories. With storybook involved we get all of these controls for free. So let's create another instance of this story. We'll make a Luke Skywalker [00:40] button. The moment that he finds out that Darth Vader is his father. Sorry, spoilers. Now, once we have an expression of this component that we like, we can actually create a new story for it. We simply export a new constant, the name will become the name of the story, and we provide [01:00] the args that we want. So label is gonna be no, primary true, background color red, and size large. Save. And now we have a dedicated I am your father story with this unique configuration of args. Now, anytime [01:19] we wanna reset a story there's a handy little refresh button here which will take us back to the default state of that story.