Promo Badge

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

<template>
  <mt-promo-badge variant="new" size="s" />
</template>

Usage

Promo Badge highlights promotional elements across our products with predefined feature labels such as New, Beta, or Shopware AI. Use it when a promotional label should stand out consistently without inventing a new visual treatment.

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

Examples

Variants

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

<template>
  <mt-promo-badge variant="new" />
  <mt-promo-badge variant="beta" />
  <mt-promo-badge variant="shopware-ai" />
</template>

Sizes

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

<template>
  <mt-promo-badge variant="new" size="s" />
  <mt-promo-badge variant="new" size="m" />
  <mt-promo-badge variant="new" size="l" />
</template>

API reference

Props

Best practices

Behavior

• Promo Badge wraps Badge and maps each promotional variant to a predefined label, icon, and badge style.
• The visible text is controlled by the selected variant, so it stays consistent across products and languages.
• The component is intentionally limited to a small set of promotional meanings rather than being a general status label.

Accessibility

• Keep the promotional meaning understandable from the text label and not from the icon alone.
• Because Promo Badge is non-interactive, avoid using it as the only way to expose an important action.
• Use it sparingly so promotional emphasis remains meaningful in dense interfaces.

Related components

• Badge: when the label represents a general product state such as status, health, or workflow.