Avoid using a blue badge

Blue badges are easily confused with Spectrum's blue accent buttons. Only use blue badges when absolutely necessary.

Only use a yellow badge for discounts

The yellow badge is reserved to communicate "best deal" or "discount" situations only. Do not use the yellow badge for other situations.

Don't display multiple badges

Badges are meant to offer quick context about what category, status, or meaning an item is associated with. If your design requires multiple badges, consider using regular text metadata and reserve a single badge for only the most important status, category, or meaning instead.

Avoid using icon-only badges

It's best to use a text label on a badge whenever possible because communicating with an icon alone may be unclear or subjective. Reserve icon-only badges for responsive cases, such as for cards in a panel that don't have space for a full badge. In related contexts, pair the icon with a label to help teach a user what the icon means. Icon-only badges should always include a tooltip on hover to show their associated label.

Badge placement

Badge placement varies widely depending on the use case. In cards, place the badge on the left side of the footer, if possible. If there is no footer or if that space is filled, affix the badge to the right edge of the preview. If there is no preview, affix the badge to the top right corner of the card.