---
title: Badge
description: >-
  The `Badge` component uses color and text to communicate status information
  for orders, products, customers, and other business data. Use badges to create
  visual hierarchy and help merchants quickly identify important information or
  status changes.


  Badges aren't interactive elements. They display information but don't respond
  to user interactions like clicks or taps.
api_version: 2025-10
api_name: pos-ui-extensions
source_url:
  html: >-
    https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-web-components/feedback-and-status-indicators/badge
  md: >-
    https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-web-components/feedback-and-status-indicators/badge.md
---

# Badge

The `Badge` component uses color and text to communicate status information for orders, products, customers, and other business data. Use badges to create visual hierarchy and help merchants quickly identify important information or status changes.

Badges aren't interactive elements. They display information but don't respond to user interactions like clicks or taps.

## Properties

Configure the following properties on the `Badge` component.

* id

  string

  A unique identifier for the element used for targeting with CSS, JavaScript, or accessibility features.

* tone

  \| 'auto' | 'neutral' | 'info' | 'success' | 'caution' | 'warning' | 'critical'

  Default: 'auto'

  Determines the visual appearance and semantic meaning of the badge. Badges rely on the tone system for semantic meaning, so using custom styling may not clearly convey meaning to merchants. Available options:

  * `'auto'` - Lets the system automatically choose the appropriate tone based on context.
  * `'neutral'` - Gray styling for general status information that doesn't require emphasis.
  * `'info'` - Blue styling for informational content and neutral updates.
  * `'success'` - Green styling for positive states, completed actions, and successful operations.
  * `'caution'` - Yellow styling for situations that need attention but aren't urgent.
  * `'warning'` - Orange styling for important notices that require merchant awareness.
  * `'critical'` - Red styling for errors, failures, and urgent issues requiring immediate action.

### Examples

* #### Display status information with a badge

  ##### Description

  Display status information using a \`Badge\` component with customizable tone and content. This example shows a basic badge with a tone property to indicate status through color.

  ##### Default

  ```HTML
  <s-badge tone="neutral">Paid</s-badge>
  <s-badge tone="success">Active</s-badge>
  <s-badge tone="info">Draft</s-badge>
  <s-badge tone="warning">On hold</s-badge>
  <s-badge tone="critical">Action required</s-badge>
  ```

## Preview

![](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2025-10/badge-default.png)

## Best practices

* **Apply appropriate tones:** Use `success` for positive states, `critical` for urgent issues, `warning` for attention-needed states, `info` for neutral information.
* **Keep text brief:** Use single words or short phrases. Avoid lengthy descriptions that don't fit the compact design.
* **Position near related content:** Place badges next to the items they describe for clear associations.
* **Use for status, not actions:** Badges display information only. For interactive elements, use buttons or clickable components.

## Limitations

Very long text content may be truncated or cause layout issues depending on the container and screen size.