| title |
|---|
Description |
Storybook's Description Doc Block displays the component's description obtained from its source code or user-generated content.
Storybook extracts the component's description and renders it at the top of the page. It is automatically generated from the docgen component for the supported frameworks based on the component's source code. Below is an abridged example and available options.
<CodeSnippets paths={[ 'common/component-story-csf-description.js.mdx', ]} usesCsf3 csf2Path="writing-docs/doc-block-description#snippet-component-story-csf-description" />
| Option | Description |
|---|---|
component |
Overrides the default component description. description: { component:'An example component description' } |
markdown |
Provides custom Markdown for the component description. <Description markdown={dedent'# Custom Description'} /> Only applicable to MDX. |
story |
Overrides the story description. description: { story: 'An example story description' } |
of |
Sets the description based either on a component or story. <Description of={Component} /> <Description of={'.'} /> Only applicable to MDX. |
If you need, you can also include the Description Doc Block in your MDX stories. It relies on the same heuristics as the one applied in the DocsPage. For example:
<CodeSnippets paths={[ 'common/component-story-mdx-description.mdx.mdx', ]} />