---
title: Badge
description: Informs merchants about the status of an object or indicates that an action has been completed. Badges display text with visual styling to communicate status information.
api_version: 2025-10
api_name: pos-ui-extensions
source_url:
  html: https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-web-componentstitles-and-text/badge
  md: https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-web-componentstitles-and-text/badge.md
---

# Badge

Informs merchants about the status of an object or indicates that an action has been completed. Badges display text with visual styling to communicate status information.

## Properties

* id

  string

  A unique identifier for the element.

* tone

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

  Default: 'auto'

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

### Examples

* #### Code

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

## Guidelines

* Badges should be positioned as close as possible to the item they’re related to.

## Content guidelines

* Be concise. Use a single word to describe the status of an item.
* Only use two or three words if you need to describe a complex state, for example "partially fulfilled".

✅ fulfilled ❌ order fulfilled

Statuses should ideally be written as adjectives:

✅ unpaid ❌ payment not received