Storybook Story or Control?

Storybook is UI development framework that lets you develop UI components in isolation. To showcase the multiple states of the component, it provides two options:

  1. add a story
  2. add a control.

Both represents the state of the component. A story is the state you can choose from the left panel under the listed component. Whereas a control is something you can edit and see how the component state looks like in real-time.

The question: Which one, out of the two, to choose to display a particular state? The answer is, there is no hard and fast rule. Storybook itself says that stories are to display “interesting” UI states. Now what constitute an interesting state is totally subjective. Taking an example of a relatively simple Button component implementation, with few possible states, here’s how I would split their display:

Button Component Stories

  • Default (with background color)
  • With Icon
  • Text (with no background)
  • Text With Icon

Controls for Each Story

Default

  • type (such as primary, secondary, warning, error, etc.; each with its own background color)
  • text (the text of the button)

With Icon

  • type
  • text
  • icon location (left or right of the button text)

Text

  • type
  • text

Text With Icon

  • type
  • text
  • icon location

I could list down all the types from primary to error as stories instead, in which case controls could be default, with icon, text only etc.

Notice that either way it’s one component that takes different props (in case of Reactjs) and renders a UI state against it. Both story and controls are just ways to display a particular state.

In short, define what looks “interesting” and significant to you, and make it a story. Provide the rest as controls.