Description
Watch a video tutorial
The Description
block displays the description for a component, story, or meta, obtained from their respective JSDoc comments.
Description
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:
parameters.docs.description.story
in the story- 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:
parameters.docs.description.component
in the meta- JSDoc comments above the meta
- JSDoc comments above the component
This flow gives you powerful ways to override the description for each scenario. Take the following example: