Storybook Addon Badges

Add badges to your stories

Tip

For more detailed documentation please see the Docs.

Installation

First, install the package.

npm i 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;

You can add badges globally, to a single component, or to an individual story. Simply add an array of strings containing the badge text as a parameter to the preview file (for global badges):

// .storybook/preview.ts
// Replace `[your-framework]` with the name of your framework
import type { Preview } from '@storybook/[your-framework]';

const preview: Preview = {
  //...other preview config
  parameters: {
    //...other parameters
    badges: ['beta'],
  },
};

export default preview;

Or at the component/story level:

// MyComponent.stories.ts
// Replace your-framework with the name of your framework
import type { Meta } from '@storybook/your-framework';

import { MyComponent } from './MyComponent';

const meta = {
  title: 'Path/To/MyComponent',
  component: MyComponent,
  parameters: {
    badges: ['beta'], // <= Add component badges here
    //...other parameters
  },
} satisfies Meta<typeof MyComponent>;

type Story = StoryObj<typeof meta>;

const Default: Story = {
  args: {
    //...component props
  },
  parameters: {
    badges: ['beta'], // <= Add story badges here
  },
};

export default meta;
export { Default };

Warning

Badges can currently only be read from a single set of parameters, so story badges overwrite global and component level badges, and component badges overwrite global badges.

For information about adding custom badge styles, tooltips and more, please see the full documentation

Contributors ✨

Thanks goes to these wonderful people (emoji key):

tetarchus 🚇 💻 📖 💡

This project follows the all-contributors specification. Contributions of any kind welcome!