Build better UIs with Storybook Args | 5min Tutorial

Storybook Args are like props but with super powers. Use args to create stories with dynamic props that anyone with a Storybook link can use to explore and test use cases! Learn with ‪@chantastic‬!

Timestamps:
00:00:00 Intro to Storybook Args
00:00:23 Args are props with superpowers
00:00:50 Add args to stories
00:01:19 Define args with CSF3 object syntax
00:01:36 Use default render functions for brevity
00:01:46 Share args between stories
00:02:10 Define component level args
00:02:39 Change args via UI controls
00:02:54 Configure UI controls
00:03:21 Change args via URL
00:03:46 Map args to component values
00:04:27 Learn more at storybook.js.org/docs

Related Articles:

- Args documentation: https://storybook.js.org/docs/react/w...
- Control argTypes documentation: https://storybook.js.org/docs/react/e...
- Storybook at https://learnstorybook.com/
- Storybook addons at https://storybook.js.org/addons
- Component driven UI development at https://www.componentdriven.org/

Follow Storybook on social media:

Discord:   / discord  
Twitter:   / storybookjs  
GitHub: https://github.com/storybookjs/storybook

Follow chantastic:

Twitter:   / chantastic  
YouTube: ‪@chantastic‬

Sponsored by Chromatic:

Chromatic is made by Storybook maintainers and sets up in just 2 minutes.
Claim free Storybook hosting at https://www.chromatic.com/!