Badges are used to inform merchants of the status of an item or action that’s been taken.
||The text displayed inside the badge.|
||The appearance and function of the badge.|
||A circle icon on the badge.|
BadgeVariantAnchor link to section titled "BadgeVariant"
Determines the badge's appearance and function:
neutral: Use this to give a non-critical status update on a piece of information or action. Appears gray.
critical: Use this for statuses that require a merchant’s urgent attention and action. Appears red.
warning: Use this for statuses that require a merchant’s attention and potential action. Appears yellow.
highlight: Use this to call out an item or action as having an important attribute. Appears turquoise.
success: Use to indicate a successful state. Appears green.
BadgeStatusAnchor link to section titled "BadgeStatus"
A circle icon on the badge:
empty: Use this for an empty circle.
partial: Use this for a half-full circle.
complete: Use this for a full circle.
- Badges should be positioned as close as possible to the item they’re related to.
Content guidelinesAnchor link to section titled "Content guidelines"
Be concise. Use a single word to describe the status of an item. Only use two or three words if you need to describe a complex state, for example "partially fulfilled".
❌ order fulfilled
Statuses should ideally be written as adjectives:
❌ payment not received