Skip to main content

Badge Content

The text displayed for a badge is controlled by its title field.

This accepts either a string to display, or a function that returns a string.

Title​

badgeMap: {
  MyCustomBadge: {
    title: 'Custom';
  }
}

Will result in

Custom

Title Function​

The title of a BadgeConfig also accept a function which must return a string.

The function accepts the following parameters:

  • badgeId: The ID used to look up the badge's configuration
  • content: The parsed `content` of the badge
  • entry: The Storybook data for the story. An object containing:
    • id: The unique ID of the entry.
    • depth: The depth of the entry in the sidebar tree (how many folders deep - including the root).
    • name: The name of the entry, usually displayed in the sidebar.
    • refId: An internal Storybook reference.
    • renderLabel: A function for rendering the label in the sidebar. See the Storybook docs for more details.
    • type: The type of the entry.
    • startCollapsed: Whether a root entry is collapsed on initial load. (Only available on type: 'root').
    • children: The contents of a root, group, or component entry. Lists the direct child entry ID's.
    • parent: The parent of a group, component, docs or story entry. The ID of the entry's direct parent entry.
    • tags: The tags of a component, docs or story entry.
    • title: The title of a docs or story entry. Can be inferred, or manually entered in the component's meta.
    • prepared: A boolean indicating whether the docs/story has been prepared. If false, the args,argTypes,initialArgs and parameters are unlikely to be populated.
    • importPath: The file path for docs/story entries. Relates to their story file (*.stories.tsx?).
    • parameters: The parameters of a docs/story entry. Only available if the entry is prepared.
    • args: The current args of a story entry, will differ to initialArgs if the values have been updated in Storybook but not saved. Only available if the entry is prepared.
    • argTypes: The argTypes of a story entry. Only available if the entry is prepared.
    • initialArgs: The initialArgs of a story entry. Only available if the entry is prepared.
  • getBadgeParts: A function that accepts a string, and splits it into `badgeId` and `content` based on the delimiter from the matcher or badgesConfig.
  • rawContent: The string that was passed in to the tags/badges array.

badgeMap: {
  MyCustomBadge: {
    title: ({ entry }) => (entry.type === 'docs' ? 'Custom Docs' : 'Custom Story');
  }
}

Will result in

Custom Docs
when the badge is displayed on a Docs Page, and
Custom Story
when dispayed on a story.

Default Behavior​

By default, if a badge does not contain a title field, it will return its inferred content. This will either be the whole string passed to the tags/badges array, or a portion of that string if using delimiters.