Badge
Use s-badge to inform merchants of the status of an item or action that's been taken. Badges display text with visual styling to communicate status information.
Anchor to propertiesProperties
- string
A unique identifier for the element.
- Anchor to tonetone| 'auto' | 'neutral' | 'info' | 'success' | 'caution' | 'warning' | 'critical'
Was this section helpful?
Code
<s-badge text="New" />
<s-badge text="Success" variant="success" />
<s-badge text="Warning" variant="warning" />
<s-badge text="Critical" variant="critical" />
<s-badge text="Active" status="active" />
<s-badge text="Complete" status="complete" />
<s-badge text="In Progress" variant="info" status="active" />
Examples
Code
Default
<s-badge text="New" /> <s-badge text="Success" variant="success" /> <s-badge text="Warning" variant="warning" /> <s-badge text="Critical" variant="critical" /> <s-badge text="Active" status="active" /> <s-badge text="Complete" status="complete" /> <s-badge text="In Progress" variant="info" status="active" />
Preview
