Base Style

The baseStyle property of the badgesConfig provides both the style for badges without an entry in the badgeMap, and the fallback style for properties that aren't defined in badge configs.

In this way, it helps keep the styles consistent as you can define a baseStyle, and then just change colours of each badge (although you can also have drastically different styles for each badge if you wish!).

Base Style Name

storybook-addon-badges offers default and github base styles by default. The baseStyle option accepts either of these as basic string values if you wish to just use the built-in styles with no changes (in fact for default you don't need to provide any value).

baseStyle: 'github',

Extended Base Style

Alternatively you can pass in your own base style that extends one of the above. In this case, baseStyle expects an object containing some of the available styles. It also requires a base property which is a string containing the name of a built-in style (default or github).

baseStyle: {
  base: 'github',
  borderRadius: '1px'
}

Full Style

If you prefer to completely customise your baseStyle, you can provide an object containing all of the available properties. In this case, the base key is not required, as all properties will have been overridden.

Function

baseStyle also accepts a function that returns any of the above values (base style string, extended base style, or a full style).

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.

Available Style Properties

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