Description

Watch a video tutorial on the Storybook channel

The Description block displays the description for a component, story, or meta, obtained from their respective JSDoc comments.

Screenshot of Description block

ButtonDocs.mdx
Loading...

Description

Loading...

Description is configured with the following props:

of

Type: Story export or CSF file exports

Specifies where to pull the description from. It can either point to a story or a meta, depending on which description you want to show.

Descriptions are pulled from the JSDoc comments or parameters, and they are rendered as markdown. See Writing descriptions for more details.

Writing descriptions

There are multiple places to write the description of a component/story, depending on what you want to achieve. Descriptions can be written at the story level to describe each story of a component, or they can be written at the meta or component level to describe the component in general.

Descriptions can be written as JSDoc comments above stories, meta, or components. Alternatively they can also be specified in parameters. To describe a story via parameters instead of comments, add it to parameters.docs.description.story; to describe meta/component, add it to parameters.docs.description.component.

We recommend using JSDoc comments for descriptions, and only use the parameters.docs.description.X properties in situations where comments are not possible to write for some reason, or where you want the description shown in Storybook to be different from the comments. Comments provide a better writing experience as you don’t have to worry about indentation, and they are more discoverable for other developers that are exploring the story/component sources.

When documenting a story, reference a story export in the of prop (see below) and the Description block will look for descriptions in the following order:

  1. parameters.docs.description.story in the story
  2. JSDoc comments above the story

When documenting a component, reference a meta export in the of prop (see below) and the Description block will look for descriptions in the following order:

  1. parameters.docs.description.component in the meta
  2. JSDoc comments above the meta
  3. JSDoc comments above the component

This flow gives you powerful ways to override the description for each scenario. Take the following example:

Button.jsx
Loading...
ButtonDocs.mdx
Loading...

Was this page helpful?

Markdown accepted ([link text](url), _italic_, **bold**, etc). Your anonymous feedback will be posted publicly on GitHub.

✍️ Edit on GitHub – PRs welcome!
Storybook
Join the community
6,620 developers and counting
WhyWhy StorybookComponent-driven UI
DocsGuidesTutorialsChangelogTelemetry
CommunityAddonsGet involvedBlog
ShowcaseExploreProjectsComponent glossary
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI