Storybook Addon Badges

Add badges to your stories

Tip

For more detailed documentation please see the Docs.

Version 3 is out!

Version 3 allows for more customization, as well as autobadges, and can now show sidebar badges for any story, using tags or a custom badges parameter.

Installation

Install and register the addon with storybook add:

npx storybook add storybook-addon-badges

Or, install manually:

npm i -D storybook-addon-badges

Then, register it as an addon in .storybook/main.js.

// .storybook/main.ts

// Replace [your-framework] with the framework you are using (e.g., react-webpack5, vue3-vite)
import type { StorybookConfig } from '@storybook/[your-framework]';

const config: StorybookConfig = {
  // ...rest of config
  addons: [
    '@storybook/addon-essentials'
    'storybook-addon-badges', // 👈 register the addon here
  ],
};

export default config;

Adding Badges

Adding badges is as simple as adding global, component-level, or story-level tags or parameters.

For details on the methods available to add badges, please see the documentation.

Contributing

If there's a feature that you'd like to see, please raise a feature request