---
title: Badge
description: |-
  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](/docs/api/checkout-ui-extensions/2026-01/polaris-web-components/typography-and-content/chip) instead.
api_version: 2026-01
api_name: checkout-ui-extensions
source_url:
  html: https://shopify.dev/docs/api/checkout-ui-extensions/latest/polaris-web-components/feedback-and-status-indicators/badge
  md: https://shopify.dev/docs/api/checkout-ui-extensions/latest/polaris-web-components/feedback-and-status-indicators/badge.md
---

# 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](https://shopify.dev/docs/api/checkout-ui-extensions/2026-01/polaris-web-components/typography-and-content/chip) instead.

## Properties

* **color**

  **'base' | 'subdued'**

  **Default: 'base'**

  Modify the color to be more or less intense.

* **icon**

  **'' | ReducedIconTypes**

  **Default: ''**

  The type of icon to be displayed in the badge.

* **iconPosition**

  **'start' | 'end'**

  The position of the icon in relation to the text.

* **id**

  **string**

  A unique identifier for the element.

* **size**

  **'small' | 'base' | 'small-100'**

  **Default: 'base'**

  Adjusts the size.

* **tone**

  **'auto' | 'neutral' | 'critical'**

  **Default: 'auto'**

  Sets the tone of the Badge, based on the intention of the information being conveyed.

### ReducedIconTypes

```ts
'cart' | 'note' | 'settings' | 'reset' | 'map' | 'menu' | 'search' | 'circle' | 'filter' | 'image' | 'alert-circle' | 'alert-triangle-filled' | 'alert-triangle' | 'arrow-down' | 'arrow-left' | 'arrow-right' | 'arrow-up-right' | 'arrow-up' | 'bag' | 'bullet' | 'calendar' | 'camera' | 'caret-down' | 'cash-dollar' | 'categories' | 'check-circle' | 'check-circle-filled' | 'check' | 'chevron-down' | 'chevron-left' | 'chevron-right' | 'chevron-up' | 'clipboard' | 'clock' | 'credit-card' | 'delete' | 'delivered' | 'delivery' | 'disabled' | 'discount' | 'edit' | 'email' | 'empty' | 'external' | 'geolocation' | 'gift-card' | 'globe' | 'grid' | 'info-filled' | 'info' | 'list-bulleted' | 'location' | 'lock' | 'menu-horizontal' | 'menu-vertical' | 'minus' | 'mobile' | 'order' | 'organization' | 'plus' | 'profile' | 'question-circle-filled' | 'question-circle' | 'reorder' | 'return' | 'savings' | 'star-filled' | 'star-half' | 'star' | 'store' | 'truck' | 'upload' | 'x-circle-filled' | 'x-circle' | 'x'
```

Examples

## Preview

![](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/badge-default-Cv6jGCns.png)

### Examples

* #### Code

  ##### Default

  ```html
  <s-badge>Default</s-badge>
  <s-badge tone="critical">Expired</s-badge>
  <s-badge color="subdued">Free</s-badge>
  ```