New
You're viewing older docs for version 8.0. View latest docs

Meta

The Meta block is used to attach a custom MDX docs page alongside a component’s list of stories. It doesn’t render any content, but serves two purposes in an MDX file:

  • Attaches the MDX file to a component and its stories, or
  • Controls the location of the unattached docs entry in the sidebar.
ButtonDocs.mdx
Loading...

The Meta block doesn’t render anything visible.

Meta

Loading...

Meta is configured with the following props:

isTemplate

Type: boolean

Determines whether the MDX file serves as an automatic docs template. When true, the MDX file is not indexed as it normally would be.

name

Type: string

Sets the name of the attached doc entry. You can attach more than one MDX file to the same component in the sidebar by setting different names for each file's Meta.

Component.mdx
Loading...

of

Type: CSF file exports

Specifies which CSF file is attached to this MDX file. Pass the full set of exports from the CSF file (not the default export!).

ButtonDocs.mdx
Loading...

Attaching an MDX file to a component’s stories with the of prop serves two purposes:

  1. Ensures the MDX content appears in the sidebar inside the component’s story list. By default, it will be named whatever the docs.defaultName (which defaults to "Docs") option is set to in main.js. But this can be overridden with the name prop.
  2. Attaches the component and its stories to the MDX file, allowing you to use other doc blocks in “attached” mode (for instance to use the Stories block).

The of prop is optional. If you don’t want to attach a specific CSF file to this MDX file, you can either use the title prop to control the location, or emit Meta entirely, and let autotitle decide where it goes.

title

Type: string

Sets the title of an unattached MDX file.

Introduction.mdx
Loading...

If you want to change the sorting of the docs entry with the component’s stories, use Story Sorting, or add specific MDX files to your stories field in main.js in order.

Attached vs. unattached

In Storybook, a docs entry (MDX file) is "attached" when it is associated with a stories file, via Meta's of prop. Attached docs entries display next to the stories list under the component in the sidebar.

"Unattached" docs entries are not associated with a stories file and can be displayed anywhere in the sidebar via Meta's title prop.

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,615 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