Components · Status · E-commerce

Badge Product & Discount

Product and Discount badges are e-commerce badges.

Tokens, sizes and requirements. Values come from the live token package and from Figma: Product & Discount.

Design Tokens

Resolved from the live token package.

VariantPartTokenValue

Measurements

Dimensions

Padding of the Discount and Product badges, at true size. Window follows the window width; Desktop (769px and up) and Mobile force the breakpoint.

Breakpoint
Padding at true size (1:1). The Product badge also has a 1px border. Switch the breakpoint to see the mobile values.
BadgePadding desktopPadding mobileType desktopType mobile
Discount, Closing sale4px 5px4px 4px14/14, 0.56px12/12, 0.48px
Product4px 5px + 1px border3px 4px + 1px border14/14, 0.56px12/12, 0.48px

The icon is 14px with a 4px gap. Closing sale next to Discount has no gap between the two; stacked, they touch as well.

Spacing

PartValue
Gap icon to textspace-4
Padding horizontal5px desktop · space-4 mobile
Padding verticalspace-4 (Discount), space-4 desktop and 3px mobile (Product)

Typography

PropertyValue
FamilyBreuer Condensed, Bold (weight 600)
CaseUppercase (the label is written in sentence case)
Desktoplabel-sm 14/14, 0.56px
Mobile12/12, 0.48px
Feature settings'ss02' 1, 'ss03' 1

Structure

Types

BadgeText (Swedish, as in Figma)Icon (Material Symbols)
Discount30% rabattNone
Closing saleUtförsäljningNone
Product: Standard assortmentStandardsortimentverified
Product: Agreed assortmentAvtalssortimentassignment_turned_in
Product: Previously purchased23 tidigare köp · icon only: 23history

States

These badges have no interaction states.

Behavior

TopicRule
InteractionNone. Never a link or a button.
Closing saleOnly together with a Discount badge: next to it, or stacked under it.
Icon onlyProduct badges can show the icon alone (the Previously purchased badge shows its number).

Accessibility Requirements

TopicRequirement
NameThe text. An icon-only badge needs a label (aria-label or hidden text); the icon is aria-hidden="true".
ColorNot the only carrier of meaning: Discount and Closing sale carry text.
ContrastWhite on red (surface-danger-default) and on black; black on light grey. All above 4.5:1.
Interactive contentNone.