Updated 18 December 2024
Badge
Updated 18 Dec 2024View FigmaUpdated 18 Dec 2024View Figma
Badges are used to inform merchants of the tone of an object or of an action that’s been taken.
Properties
Tone
Use the badge’s tone to help reinforce semantic meaning and messaging such as success and critical errors.
Size
Changes the size of a Badge.
Status indicator
Renders a small indicator to indicate the current status of something.
Icon
Adds an icon before the badge label. These are most often used to help further indicate status.
Badge(84 variants)
Progress Indicator(3 variants)