Badge Style

Badges will inherit the baseStyle by default, so any badges that either don't have an entry in the badgeMap, or that don't define a style key in their definition, will have the same look.

To define a custom style for each badge, so that they are easy to tell apart, pass in a BadgeStyle object to its configuration in the badgeMap. This can be a partial style, and any values not provided will fall back to the values.

The style property accepts either an inline BadgeStyle object, or a function that returns a BadgeStyle.

Inline Style

An inline style object can contain any of the available properties. Any that are not provided will fall back to the values from baseStyle.

badgeMap: {
  MyCustomBadge: {
    title: 'My Custom Badge',
    styles: {
      backgroundColor: '#00C7AC',
      borderColor: 'red',
      color: '#FFFFFF'
    }
  }
},

Style Function

A style function accepts a BadgeFnParameters object as its only parameter and returns a BadgeStyle. This can be used to adjust the style based on information about the story it's being added to:

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: 'My Custom Badge',
    styles: ({ entry }) => ({ backgroundColor: entry.type === 'story' ? '#00C7AC' : '#FFFFFF'});
  }
},

Available Style Properties

The BadgeStyle object is a limited subset of CSS properties, if there are any you need simply raise a feature request.

The available properties (and their values in the built-in styles) are:

Property	Value in default	Value in github
backgroundColor	#EDEFF5	#EDEFF5
borderColor	#474D66	#474D66
borderRadius	3px	10px
borderStyle	solid	solid
borderWidth	1px	1px
boxShadow	none	none
color	#474D66	#474D66
fontFamily	inherit	inherit
fontSize	0.625rem	0.75rem
fontWeight	bold	bold
lineHeight	1	1
paddingBlock	2px	2px
paddingInline	5px	8px
textTransform	uppercase	lowercase