Add Controls to Next.js Page Props with Story Args

Michael Chan
InstructorMichael Chan
Share this video with your friends

Social Share Links

Send Tweet
Published 3 years ago
Updated 3 years ago

In this lesson, we add Storybook controls to page stories using Storybook args. With args, stories can be manipulated and transformed in the browser. Additionally, we configure all stories in a module to use default args.

Michael Chan: [0:00] Args are a powerful way to add controls for data that we might change in Storybook components. For example, this component takes a name prop, name="John Doh". Providing the prop directly changes the story, but using args, we'll let anyone viewing this story change this data as well.

[0:21] We achieve this by adding an args property to the home page story. It's an object, just like props, so we use name: "John Dough". We just need to configure our story to take args and spread them out over the component. Now we see name available in Controls, so we can see what this page will look like with different names.

[0:46] Finally, args are composable, so we can provide a default as well -- name: "John Doe". This John Doe will get used if we don't provide any args for the specific story.

~ 10 minutes ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today