Storybook 9 is coming! Join the newsletter to get it first.

Addon Component Status

Show the component status

View on Github

Storybook Addon Status

Storybook Status Addon shows the component status in your story.

Live preview

Installation

yarn add --dev @mverissimoo/storybook-addon-status

Configuration

Add storybook-addon-status to your list of addons:

// .storybook/main.js

module.exports = {
  addons: ['@mverissimoo/storybook-addon-status/preset'],
};

Usage

Just add the following parameter in your story:

export default {
  title: 'Components/Button',
  parameters: {
    status: 'stable', // beta| deprecated | review | stable
  },
};

Custom status badge

Just add a status object in your parameters eg:

// .storybook/preview.js

export const parameters = {
  badges: {
    custom: {
      title: 'some badge',
      color: '#FFFFFF',
      background: '#000000',
    },
  },
};
Made by
  • mverissimoo
    mverissimoo
Work with
    Angular
    React
    Vue
Tags