Badge
Inform users about the status of an object or indicate that an action has been completed.
Anchor to propertiesProperties
- Anchor to colorcolor"base" | "strong"
Modify the color to be more or less intense.
- Anchor to iconicon"" | "replace" | "search" | "link" | "product" | "variant" | "collection" | "select" | "info" | "incomplete" | "complete" | "color" | "money" | "adjust" | "affiliate" | "airplane" | "alert-bubble" | "alert-circle" | "alert-diamond" | "alert-location" | "alert-octagon-filled" | "alert-octagon" | "alert-triangle-filled" | "alert-triangle" | "app-extension"
The type of icon to be displayed in the badge.
- Anchor to sizesize"base" | "large" | "large-100"
Adjusts the size.
- Anchor to tonetone"info" | "success" | "warning" | "critical" | "auto" | "neutral" | "caution"
Sets the tone of the Badge, based on the intention of the information being conveyed.
Was this section helpful?
Code
<s-badge>Fulfilled</s-badge>
<s-badge tone="info">Draft</s-badge>
<s-badge tone="success">Active</s-badge>
<s-badge tone="caution">Open</s-badge>
<s-badge tone="warning">On hold</s-badge>
<s-badge tone="critical">Action required</s-badge>
Examples
Code
Default
<s-badge>Fulfilled</s-badge> <s-badge tone="info">Draft</s-badge> <s-badge tone="success">Active</s-badge> <s-badge tone="caution">Open</s-badge> <s-badge tone="warning">On hold</s-badge> <s-badge tone="critical">Action required</s-badge>