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" Default: 'base': Modify the color to be more or less intense.
Anchor to icon icon "" | "replace" | "search" | "split" | "link" | "edit" | "product" | "variant" | "collection" | "select" | "info" | "incomplete" | "complete" | "color" | "money" | "adjust" | "affiliate" | "airplane" | "alert-bubble" | "alert-circle" | "alert-diamond" | "alert-location" | "alert-octagon" | "alert-octagon-filled" | "alert-triangle": The type of icon to be displayed in the badge.
Anchor to size size "base" | "large" | "large-100" Default: 'base': Adjusts the size.
Anchor to tone tone "info" | "success" | "warning" | "critical" | "auto" | "neutral" | "caution" Default: 'auto': Sets the tone of the Badge, based on the intention of the information being conveyed.

Anchor to slotsSlots

Anchor to children children HTMLElement: The content of the Badge.

Examples

<>

<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>

</>

Preview

Examples

Code

jsx

<>
  <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>
</>

html

<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>

Order status badges

Description

Demonstrates how different badge tones can visually represent various order fulfillment states, enabling merchants to quickly understand order progress at a glance.

jsx

<s-stack direction="inline" gap="base">
  <s-badge tone="success">Fulfilled</s-badge>
  <s-badge tone="warning">Partially fulfilled</s-badge>
  <s-badge tone="neutral">Unfulfilled</s-badge>
  <s-badge tone="critical">Cancelled</s-badge>
</s-stack>

html

<s-stack direction="inline" gap="base">
  <s-badge tone="success">Fulfilled</s-badge>
  <s-badge tone="warning">Partially fulfilled</s-badge>
  <s-badge tone="neutral">Unfulfilled</s-badge>
  <s-badge tone="critical">Cancelled</s-badge>
</s-stack>

Status indicators with icons

Description

Showcases how badges can incorporate both tones and icons to provide contextual information across different merchant scenarios, such as product management, inventory tracking, and payment status.

jsx

<s-stack gap="base">
  {/* Product status */}
  <s-stack direction="inline" gap="base">
    <s-badge tone="success" icon="view">
      Active
    </s-badge>
    <s-badge tone="warning" icon="clock">
      Scheduled
    </s-badge>
    <s-badge tone="critical">Archived</s-badge>
  </s-stack>

  {/* Inventory status */}
  <s-stack direction="inline" gap="base">
    <s-badge tone="success">In stock</s-badge>
    <s-badge tone="warning" icon="alert-triangle">
      Low stock
    </s-badge>
    <s-badge tone="critical">Out of stock</s-badge>
  </s-stack>
</s-stack>

html

<s-stack gap="base">
  <!-- Product status -->
  <s-stack direction="inline" gap="base">
    <s-badge tone="success" icon="view">Active</s-badge>
    <s-badge tone="warning" icon="clock">Scheduled</s-badge>
    <s-badge tone="critical">Archived</s-badge>
  </s-stack>

  <!-- Inventory status -->
  <s-stack direction="inline" gap="base">
    <s-badge tone="success">In stock</s-badge>
    <s-badge tone="warning" icon="alert-triangle">Low stock</s-badge>
    <s-badge tone="critical">Out of stock</s-badge>
  </s-stack>
</s-stack>

Within table context

Description

Illustrates how badges can be seamlessly integrated into table layouts to provide quick, visually distinct status indicators for individual table rows.

jsx

<s-table>
  <s-table-header-row>
    <s-table-header>Order</s-table-header>
    <s-table-header>Fulfillment</s-table-header>
    <s-table-header>Payment</s-table-header>
  </s-table-header-row>
  <s-table-body>
    <s-table-row>
      <s-table-cell>#1001</s-table-cell>
      <s-table-cell>
        <s-badge tone="success">Fulfilled</s-badge>
      </s-table-cell>
      <s-table-cell>
        <s-badge tone="success">Paid</s-badge>
      </s-table-cell>
    </s-table-row>
  </s-table-body>
</s-table>

html

<s-table>
  <s-table-header-row>
    <s-table-header>Order</s-table-header>
    <s-table-header>Fulfillment</s-table-header>
    <s-table-header>Payment</s-table-header>
  </s-table-header-row>
  <s-table-body>
    <s-table-row>
      <s-table-cell>#1001</s-table-cell>
      <s-table-cell>
        <s-badge tone="success">Fulfilled</s-badge>
      </s-table-cell>
      <s-table-cell>
        <s-badge tone="success">Paid</s-badge>
      </s-table-cell>
    </s-table-row>
  </s-table-body>
</s-table>

Different sizes for emphasis

Description

Demonstrates the two available badge sizes for creating visual hierarchy.

jsx

<s-stack direction="inline" gap="base">
  <s-badge size="base">New</s-badge>
  <s-badge size="large">Attention needed</s-badge>
</s-stack>

html

<s-stack direction="inline" gap="base">
  <s-badge size="base">New</s-badge>
  <s-badge size="large">Attention needed</s-badge>
</s-stack>

Anchor to useful-forUseful for

Communicating the state of an object
Identifying objects that need attention or action
Quickly scanning complex lists to find specific object states

Anchor to best-practicesBest practices

base: use in tables where many badges are displayed
large: use when badge needs to stand out prominently
Text truncates automatically, keep labels short to avoid truncation
Badges are static indicators, not interactive or dismissible
Use critical or warning tones for errors needing immediate attention
Use consistent styles and icons for common statuses
When using badges in line items, integrate them with the full content group rather than attaching only to the header
Don't use badges for merchant-created information. Instead, use a Chip or ClickableChip

Anchor to content-guidelinesContent guidelines

Badge labels should:

Use 1-2 words maximum: Fulfilled, Partially refunded
Always use past tense: Refunded not Refund

Was this page helpful?