Skip to main content

Badge

Informs merchants about the status of an object or indicates that an action has been completed. Badges display text with visual styling to communicate status information.

Anchor to propertiesProperties

Anchor to id
id
string

A unique identifier for the element.

Anchor to tone
tone
| 'auto' | 'neutral' | 'info' | 'success' | 'caution' | 'warning' | 'critical'
Default: 'auto'

Sets the tone of the Badge, based on the intention of the information being conveyed.

Was this section helpful?

Code

<s-badge tone="neutral">Paid</s-badge>
<s-badge tone="success">Active</s-badge>
<s-badge tone="info">Draft</s-badge>
<s-badge tone="warning">On hold</s-badge>
<s-badge tone="critical">Action required</s-badge>

Preview

Anchor to guidelinesGuidelines

  • Badges should be positioned as close as possible to the item they’re related to.
Was this section helpful?

Anchor to content-guidelinesContent 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".

✅ fulfilled ❌ order fulfilled

Statuses should ideally be written as adjectives:

✅ unpaid ❌ payment not received

Was this section helpful?