Badge

<script setup lang="ts">
import MtBadge from "@shopware-ag/meteor-component-library/MtBadge";
</script>

<template>
  <mt-badge variant="neutral" size="s"> Badge </mt-badge>
</template>

Usage

Badge is a compact, non-interactive label for short, glanceable states. Use it inline in tables, cards, lists, or detail headers to help users scan status, category, or state, and reach for the variant, size, icon, or status indicator when an extra visual cue reinforces the meaning.

import { MtBadge } from "@shopware-ag/meteor-component-library";

Examples

Variants

<script setup lang="ts">
import MtBadge from "@shopware-ag/meteor-component-library/MtBadge";
</script>

<template>
  <mt-badge variant="neutral">Neutral</mt-badge>
  <mt-badge variant="info">Info</mt-badge>
  <mt-badge variant="attention">Attention</mt-badge>
  <mt-badge variant="critical">Critical</mt-badge>
  <mt-badge variant="positive">Positive</mt-badge>
</template>

Sizes

<script setup lang="ts">
import MtBadge from "@shopware-ag/meteor-component-library/MtBadge";
</script>

<template>
  <mt-badge size="s">Small</mt-badge>
  <mt-badge size="m">Medium</mt-badge>
  <mt-badge size="l">Large</mt-badge>
</template>

Status indicator

<script setup lang="ts">
import MtBadge from "@shopware-ag/meteor-component-library/MtBadge";
</script>

<template>
  <mt-badge variant="positive" :status-indicator="true"> Connected </mt-badge>
</template>

Icon

<script setup lang="ts">
import MtBadge from "@shopware-ag/meteor-component-library/MtBadge";
</script>

<template>
  <mt-badge variant="positive" icon="solid-check-circle"> Successful </mt-badge>
</template>

API reference

Props

Prop	Type	Default
`variant`	`"critical" \| "positive" \| "info" \| "neutral" \| "attention"`	`"neutral"`
`icon`	`string`	`undefined`
`size`	`"m" \| "l" \| "s"`	`"s"`
`status-indicator`	`boolean`	`false`

Slots

Slot	Bindings
`default`	`any`
`icon`	`any`

Best practices

Keep badge labels short and easy to scan.
Choose the variant that matches the semantic meaning of the label.
Use the smallest size that still fits the surrounding layout comfortably.
Add an icon or status indicator only when it meaningfully improves recognition.

Don't

Do not use Badge for long messages or explanatory text.
Do not make Badge behave like buttons or links.
Do not overload a surface with too many badges, because they quickly lose emphasis.
Do not rely on color alone to communicate meaning.

Behavior

Badge is presentational and non-interactive. If users need to click, open, or trigger something, use a more appropriate interactive component around it.
The component stays intentionally compact, so it works best with a short label and a single supporting visual treatment.
The status indicator and icon are optional enhancements, not a replacement for a clear text label.

Accessibility

Keep the label understandable on its own so meaning does not depend only on color, the status dot, or the icon.
Because badges are non-interactive, avoid using them as the only way to expose important information or actions.
Use concise text so the badge remains readable in dense interfaces and small sizes.

Promo Badge: when the label is a predefined promotional label such as New, Beta, or Shopware AI.

Edit this pageorReport an issue

Avatar

A compact visual representation of a person or entity, shown as a profile image or initials.

Banner

A persistent, inline message that stays visible in the page layout.