\n\n---\n\n## π Table of Contents\n\n\n- [Table of Contents](#-table-of-contents)\n- [Installation](#-installation)\n- [Default Config](#-default-config)\n- [Usage](#-usage)\n- [Customise Badge Config](#-customise-badge-config)\n- [Sidebar Config](#-sidebar-config)\n- [Workflow Examples](#-workflow-examples)\n- [Limitations](#-limitations)\n- [Contributing](#-contributing)\n- [Support](#-support)\n- [Contact](#-contact)\n- [Acknowledgments](#-acknowledgments)\n\n## π¦ Installation\n\n```sh\nyarn add -D storybook-addon-tag-badges\n```\n\n```sh\nnpm install -D storybook-addon-tag-badges\n```\n\n```sh\npnpm install -D storybook-addon-tag-badges\n```\n\nIn your `.storybook/main.ts` file, add the following:\n\n```ts\n// .storybook/main.ts\nexport default {\n addons: ['storybook-addon-tag-badges'],\n}\n```\n\n## π Default Config\n\nThis addon comes with a default config, allowing you to get started immediately by adding tags to your content.\n\n### Preconfigured Badges\n\n| Preview | Tag patterns | Suggested use |\n| ---------------------------------: | ------------------------------------- | ------------------------------------------------------------------------------------------------------------------ |\n|  | `new` | Recently added components or props/features |\n|  | `alpha`, `beta`, `rc`, `experimental` | Warn that a component or prop is not stable yet |\n|  | `deprecated` | Components or props that should be avoided in new code |\n|  | `outdated` | Components with design changes that weren't yet implemented, which can incur extra development costs to your users |\n|  | `danger` | Components that require particular attention when configuring them (e.g. for with security concerns) |\n|  | `code-only` | Components that only exist in code, and not in design |\n|  | `version:*`, `v:*` | Per-component versioning |\n\n### Display Logic\n\nBy default, all tags are always displayed on the toolbar, but they're only displayed in the sidebar for component entries, and for docs or story entries that appear at the top-level. They are not displayed in docs or story entries inside a component or group entry.\n\nBesides, the addon is limited to one badge per entry in the sidebar. Badges placed first in the configuration will be displayed in priority. For example, the `new` badge will be displayed before the `code-only` badge.\n\n> [!WARNING]\n> This means that when you customise this addon's configuration, you should include your customisations **before** spreading the default config object, so that they have a higher priority.\n\n## π Usage\n\nTo display preconfigured badges, add the relevant tags to your components, stories, or docs entries.\n\n### Component Badges\n\nTo set badges for a component (and its child stories), define `tags` in the component's meta:\n\n```ts\n// src/components/Button.stories.ts\nimport type { Meta, StoryObj } from '@storybook/react'\nimport { Button } from './Button'\n\nconst meta: Meta![\"Example](\"./static/addon-example.png\"\n)
\n ![\"Status:](\"https://img.shields.io/badge/status-stable-4cc71e\"){kind=icon}
![\"commit](\"https://img.shields.io/github/commit-activity/m/Sidnioulz/storybook-addon-tag-badges\")
![\"last](\"https://img.shields.io/github/last-commit/Sidnioulz/storybook-addon-tag-badges\")
![\"open](\"https://img.shields.io/github/issues/Sidnioulz/storybook-addon-tag-badges\")
![\"CodeQL](\"https://github.com/Sidnioulz/storybook-addon-tag-badges/actions/workflows/github-code-scanning/codeql/badge.svg?branch=main\"){kind=icon}
\n ![\"CI](\"https://github.com/Sidnioulz/storybook-addon-tag-badges/actions/workflows/continuous-integration.yml/badge.svg?branch=main\"){kind=icon}
\n ![\"code](\"https://codecov.io/gh/Sidnioulz/storybook-addon-tag-badges/graph/badge.svg?token=4SX3N57XH3\"){kind=icon}
\n ![\"contributors\"](\"https://img.shields.io/github/contributors/Sidnioulz/storybook-addon-tag-badges\")
![\"code](\"https://img.shields.io/badge/Contributor%20Covenant-2.1-4baaaa.svg\"){kind=icon}
\n ![\"license\"](\"https://img.shields.io/github/license/Sidnioulz/storybook-addon-tag-badges.svg\")
\n ![\"forks\"](\"https://img.shields.io/github/forks/Sidnioulz/storybook-addon-tag-badges\")
![\"stars\"](\"https://img.shields.io/github/stars/Sidnioulz/storybook-addon-tag-badges\")
![\"sponsor](\"https://img.shields.io/badge/sponsor-30363D?logo=GitHub-Sponsors&logoColor=#EA4AAA\"){kind=icon}