New
Integrate Next.js and Storybook automaticallyAutomate with Chromatic
Star75,440
Back to integrations
Add your integration
Categories
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon
Addon Component Status
Show the component status
npm install @mverissimoo/storybook-addon-status
Last updated almost 2 years ago
877
Downloads per week
Readme View on GitHub

Storybook Addon Status

Storybook Status Addon show 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 param in your storie:

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

Custom status badge

Just add a status object in your parameters eg:

// .storybbok/preview.js

export const parameters = {
  badges: {
    custom: {
      title: 'some badge',
      color: '#FFFFFF',
      background: '#000000',
    },
  },
};
Join the community
5,858 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI