Components · Status · E-commerce

Badge Product & Discount

Product and Discount badges are e-commerce badges: a discount, a closing sale and the assortment of a product.

Every example on this page is the real component. Figma: Product & Discount.

Playground

E-commerce only. Choose breakpoint and badge; Product badges can show the icon alone. Mobile and Desktop force the breakpoint values whatever the window width; Window follows the window.

Breakpoint
Icon only

Markup for this selection

HTML




Overview
These badges are for e-commerce only, to promote products. Discount shows a price reduction, with an optional Closing sale badge. Product badges say which assortment a product belongs to, or that it has been bought before.
Do not use them with any other icon than the one specified for each badge.
A short summary lives here; the three pages are: Examples & Guidelines (this page), Specifications and Code.




Usage
When to use
  • Show a discount on a product: 30% rabatt.
  • Show that a discounted product is part of a closing sale.
  • Show which assortment a product is in: Standard or Agreed assortment.
  • Show that the customer has bought the product before (suggestion).
When not to use
  • Outside e-commerce. For a status, use Basic.
  • With an icon other than the one specified.
  • To carry a long message: use Purchase Info.
Do
  • Keep the text to a few words.
  • Put the Closing sale badge next to the Discount badge, or under it when there is no room.
  • Use the specified icon for each Product badge.
Don’t
  • Show Closing sale without a Discount badge.
  • Change the colors: Discount is red, Closing sale black, Product grey.
  • Use these badges outside e-commerce.




Anatomy
  1. Discount. Red (surface-danger-default), white text. The price reduction.
  2. Closing sale. Black (surface-100), white text. Only together with a Discount badge, next to it or stacked under it.
  3. Product. Light grey (surface-05) with a 1px border. Says which assortment the product is in.
  4. Icon. 14px, 4px from the label. The icon is fixed for each Product badge.
  5. Label. Short text, Breuer Condensed Bold, uppercase.




Variants
Discount (red), Closing sale (black) and three Product badges (grey, with an icon).
30% rabatt30% rabattUtförsäljning30% rabattUtförsäljning
Discount, Discount with Closing sale, Discount with Closing sale stacked.
Standardsortiment Avtalssortiment 23 tidigare köp
  23
Standard assortment, Agreed assortment and Previously purchased, with text and as an icon only.




Layout & Appearance
Stacking
Closing sale sits next to the Discount badge. When there is no room, stack the two: Discount on top, Closing sale under it, both left-aligned.
30% rabattUtförsäljning
Next to each other.
30% rabattUtförsäljning
Stacked.
Mobile and desktop
The text is 12/12 on mobile and 14/14 on desktop. Padding is a little tighter on mobile.




Accessibility
These badges are text. All requirements are listed under Accessibility Requirements in Specifications.
Screen reader support
The text is read as it is. An icon-only Product badge has no text: give it a label (aria-label or visually hidden text), for example “Standard assortment”. The icon itself is decorative.
Not interactive
Never a link or a button.







References