Custom Badges

Any string that is passed to tags/badges will display as a badge, and use the baseStyle by default. To prevent all badges looking the same, you can define your own custom badges, each with their own look.

To add a custom badge, it needs to be defined under the badgeMap configuration options.

Property	Description	Default
displayContentOnly	An override for the addon setting with the same name.	defaults to the value from badgesConfig
locations	Override the locations that this badge can appear in.	defaults to the value from badgesConfig
priority	This setting is used to control the order of badges.	99
style	The style options for the badge. Any values not defined will use the addon's baseStyle.	defaults to the baseStyle
title	The text to display on the badge. Can be a string, or a badge function	defaults to the content portion of the badge (or the whole badge/tag string)
tooltip	A tooltip to display on hover.	null

Using Preview Config/Parameters?

Be aware that while badgesConfig can be defined at global, component, or story level, the badges defined under badgesMap will only apply to the badges defined 'below' that level. It is recommended to define the badgesConfig parameter at the global level for all badges to ensure consistency.

This does not apply when adding the config to the manager config file, as the config is not extendable, and all badges should be defined at the global level.

Using the BADGE map

storybook-addon-badges provides a BADGE export that allows using a pre-defined map of the badge names to ensure only defined badges are used, and provide completion with typescript.

To allow extending the default BADGE, as well as usage within js files this is just a simple object mapping a key to a string.

To provide your own map, you can either create your own object, or extend the existing one to make use of the pre-defined badges.

import { BADGE } from 'storybook-addon-badges';

const BADGES = {
  ...BADGE,
  MY_CUSTOM_BADGE: 'MyCustomBadge',
};