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.

Was this section helpful?

Anchor to slotsSlots

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

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

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>

Anchor to examplesExamples

Component examples

Anchor to example-basic-usageBasic usage

Anchor to example-order-status-badgesOrder status badges

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

Anchor to example-status-indicators-with-iconsStatus indicators with icons

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.

Anchor to example-within-table-contextWithin table context

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

Anchor to example-different-sizes-for-emphasisDifferent sizes for emphasis

Demonstrates the two available badge sizes for creating visual hierarchy.

Was this section helpful?

Order status badges

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

Examples

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>