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):
This project follows the all-contributors specification. Contributions of any kind welcome!
Roadmap
These are some future enhancements that I'd like to include:
- Sidebar badges show even when not selected (Blocked by a potential bug in Storybook)
- Ability to search for stories based on badge name (Also blocked by the same above bug)
If there's a feature that you'd like to see, please raise a feature request
- tetarchus