Storybook addons

Essential addons

 

There are many third-party addons as well as “official” addons developed by the Storybook core team.

 

• Docs
• Controls
• Actions
• Viewport
• Backgrounds
• Toolbars & globals
• Measure
• Outline

 

---

Docs

Storybook gives you tools to expand this basic documentation with prose and layout that feature your components and stories prominently. 

Document component usage and properties in Markdown

npm install @storybook/addon-docs

 

1. DocsPage

Every story gets a DocsPage. DocsPage pulls information from your stories, components, source code, and story metadata to construct a sensible, zero-config default.

2. MDX

MDX is a syntax for writing long-form documentation and stories side-by-side in the same file.

MDX gives you full control over your component documentation.

import { Meta, Story, Canvas } from '@storybook/addon-docs';
import { Checkbox } from './Checkbox';

<Meta title="MDX/Checkbox" component={Checkbox} />

# Checkbox

With `MDX` we can define a story for `Checkbox` right in the middle of our
markdown documentation.

<Canvas>
  <Story name="all checkboxes">
    <form>
      <Checkbox id="Unchecked" label="Unchecked" />
      <Checkbox id="Checked" label="Checked" checked />
      <Checkbox appearance="secondary" id="second" label="Secondary" checked />
    </form>
  </Story>
</Canvas>

 

Controls

Storybook Controls gives you a graphical UI to interact with a component's arguments dynamically.

To use the Controls addon, you need to write your stories using args. Storybook will automatically generate UI controls based on your args and what it can infer about your component

// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx

export default {
  title: 'Button',
  component: Button,
  argTypes: {
    variant: {
      options: ['primary', 'secondary'],
      control: { type: 'radio' }
    }
  }
};

 

Control Types

Actions

Actions work via supplying special Storybook-generated “action” arguments (referred to as "args" for short) to your stories. There are two ways to get an action arg:

Action argType annotation

You can use argTypes to tell Storybook that an arg to your story should be an action. Usually it makes sense to do this at the component level (although it can be done per story):

// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx

export default {
  title: 'Button',
  argTypes: { onClick: { action: 'clicked' } },
};

Action event handlers