UNPKG

@shopware-ag/meteor-component-library

Version:

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

github.com/shopware/meteor

shopware/meteor

20 lines (12 loc) • 883 B
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
# Promo badge The `Promo Badge` is a specialized version of the `Badge` component used to highlight promotional states or feature labels, such as _New, Beta, or Shopware AI_. Unlike the general `Badge`, `Promo Badge` is limited to predefined promotional variants to ensure consistent visual treatment across the product. ### ✅ Do's --- - Use to highlight promotional elements across our products - Keep text consistent with defined variants (New, Beta, Shopware AI, …) - Use a `Promo Badge` sparingly to draw attention without cluttering the interface ### ❌ Don'ts --- - Don’t use for status indicators _(e.g. Error, Success)_ → use `Badge` instead - Don’t create custom promotional variants. Stick to the predefined set for consistency - Don't make a `Promo Badge` clickable as they are not `Buttons` or `Links`. However, showing a `Tooltip` on hover is allowed.