Badge
Inform users about the status of an object or indicate that an action has been completed.
Anchor to propertiesProperties
Anchor to color
color
"base" | "strong"
Modify the color to be more or less intense.
Anchor to icon
icon
"" | "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" | "alert-triangle-filled" | "app-extension"
Anchor to size
size
"base" | "large" | "large-100"
Adjusts the size.
Anchor to tone
tone
"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>