Skip to main content

Badge

The badge component displays status information or indicates completed actions through compact visual indicators. Use badge to communicate object states, order statuses, or system-generated classifications that help users quickly understand item conditions.

Badges support multiple tones and sizes, with optional icons to reinforce status meaning and improve scannability in lists and tables. For user-created labels, categories, or tags, use chip instead.

Support
Targets (29)

Supported targets

  • purchase.checkout.actions.render-before
  • purchase.checkout.block.render
  • purchase.checkout.cart-line-item.render-after
  • purchase.checkout.cart-line-list.render-after
  • purchase.checkout.contact.render-after
  • purchase.checkout.delivery-address.render-after
  • purchase.checkout.delivery-address.render-before
  • purchase.checkout.footer.render-after
  • purchase.checkout.header.render-after
  • purchase.checkout.payment-method-list.render-after
  • purchase.checkout.payment-method-list.render-before
  • purchase.checkout.pickup-location-list.render-after
  • purchase.checkout.pickup-location-list.render-before
  • purchase.checkout.pickup-location-option-item.render-after
  • purchase.checkout.pickup-point-list.render-after
  • purchase.checkout.pickup-point-list.render-before
  • purchase.checkout.reductions.render-after
  • purchase.checkout.reductions.render-before
  • purchase.checkout.shipping-option-item.details.render
  • purchase.checkout.shipping-option-item.render-after
  • purchase.checkout.shipping-option-list.render-after
  • purchase.checkout.shipping-option-list.render-before
  • purchase.thank-you.announcement.render
  • purchase.thank-you.block.render
  • purchase.thank-you.cart-line-item.render-after
  • purchase.thank-you.cart-line-list.render-after
  • purchase.thank-you.customer-information.render-after
  • purchase.thank-you.footer.render-after
  • purchase.thank-you.header.render-after

Anchor to propertiesProperties

Anchor to color
color
'base' | 'subdued'
Default: 'base'

Controls the visual weight and emphasis of the badge.

  • base: Standard weight with moderate emphasis, suitable for most use cases.
  • subdued: Reduced visual weight for less prominent or secondary badges.
Anchor to icon
icon
'' |
Default: ''

An icon displayed inside the badge to provide additional visual context or reinforce the badge's meaning. Set to an empty string to display no icon.

Anchor to iconPosition
iconPosition
'start' | 'end'

The position of the icon relative to the badge text.

  • start: Places the icon before the text.
  • end: Places the icon after the text.
Anchor to id
id
string

A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting.

Anchor to size
size
'small' | 'base' | 'small-100'
Default: 'base'

The size of the badge.

  • base: The default size, suitable for most use cases.
  • small: A smaller badge for compact layouts.
  • small-100: The smallest badge for tight spaces or dense lists.
Anchor to tone
tone
'auto' | 'neutral' | 'critical'
Default: 'auto'

The semantic meaning and color treatment of the badge.

  • auto: Automatically determined based on context.
  • neutral: General information without specific intent.
  • critical: Urgent problems or destructive actions.
Examples
<s-badge>Default</s-badge>
<s-badge tone="critical">Expired</s-badge>
<s-badge color="subdued">Free</s-badge>

Preview

Was this page helpful?