Badge
Inform users about the status of an object or indicate that an action has been completed.
Anchor to propertiesProperties
- Anchor to colorcolor'base' | 'subdued'
Modify the color to be more or less intense.
- Anchor to iconicon'' | ReducedIconTypes
The type of icon to be displayed in the badge.
- Anchor to iconPositioniconPosition'start' | 'end'
The position of the icon in relation to the text.
- string
A unique identifier for the element.
- Anchor to sizesize'small' | 'base' | 'small-100'
Adjusts the size.
- Anchor to tonetone'auto' | 'neutral' | 'critical'
Sets the tone of the Badge, based on the intention of the information being conveyed.
ReducedIconTypes
'alert-circle' | 'alert-triangle-filled' | 'alert-triangle' | 'arrow-down' | 'arrow-left' | 'arrow-right' | 'arrow-up-right' | 'arrow-up' | 'bag' | 'bullet' | 'calendar' | 'camera' | 'caret-down' | 'cart' | 'cash-dollar' | 'categories' | 'check-circle' | 'check' | 'chevron-down' | 'chevron-left' | 'chevron-right' | 'chevron-up' | 'circle' | 'clipboard' | 'clock' | 'credit-card' | 'delete' | 'delivered' | 'delivery' | 'disabled' | 'discount' | 'edit' | 'email' | 'empty' | 'external' | 'filter' | 'geolocation' | 'gift-card' | 'globe' | 'grid' | 'image' | 'info-filled' | 'info' | 'list-bulleted' | 'location' | 'lock' | 'map' | 'menu-horizontal' | 'menu-vertical' | 'menu' | 'minus' | 'mobile' | 'note' | 'order' | 'organization' | 'plus' | 'profile' | 'question-circle-filled' | 'question-circle' | 'reorder' | 'reset' | 'return' | 'savings' | 'search' | 'settings' | 'star-filled' | 'star-half' | 'star' | 'store' | 'truck' | 'upload' | 'x-circle-filled' | 'x-circle' | 'x'Was this section helpful?
Code
<s-badge>Default</s-badge>
<s-badge tone="critical">Expired</s-badge>
<s-badge color="subdued">Free</s-badge>
Examples
Code
Default
<s-badge>Default</s-badge> <s-badge tone="critical">Expired</s-badge> <s-badge color="subdued">Free</s-badge>
Preview
