@shopware-ag/meteor-component-library/src/components/feedback-indicator/mt-badge/mt-badge.mdx

The meteor component library is a Vue component library developed by Shopware. It is based on the [Meteor Design System](https://shopware.design/).

import { Meta } from "@storybook/blocks";

import * as BadgeStories from "./mt-badge.stories";

<Meta of={BadgeStories} title="Components/mt-badge" />

# Badge

The `Badge` component is a small, non-interactive visual indicator used to display the status of an entity or feature. It provides a quick, glanceable representation of state (e.g. Draft, Error). `Badges` are short, subtle, and reinforce meaning without overwhelming other UI elements.

### ✅ Do's

---

- Use `Badges` for short, clear status labels (e.g. Active, In progress, Done, …)
- Select the variant that matches semantic meaning (e.g. `positive` for success, `critical` for errors)
- Choose an appropriate size depending on context (list, card, inline)
- Use the status indicator or icon for additional visual clarity when needed

### ❌ Don'ts

---

- Don’t use `Badges` for long sentences (e.g. “This product is temporarily unavailable”)
- Don't make badges clickable as they are not `Buttons` or `Links`. However, showing a `Tooltip` on hover is allowed.
- Don’t overload screens with too many badges, they lose effectiveness
- Don’t rely on color alone to convey meaning, use text and/or an icon for clarity