---
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-04/web-components/typography-and-content/chip)
instead.
api_version: 2026-04
api_name: checkout-ui-extensions
source_url:
html: >-
https://shopify.dev/docs/api/checkout-ui-extensions/latest/web-components/feedback-and-status-indicators/badge
md: >-
https://shopify.dev/docs/api/checkout-ui-extensions/latest/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-04/web-components/typography-and-content/chip) instead.
### Support Targets (29)
### Supported targets
* purchase.checkout.actions.render-before
* purchase.checkout.block.render
* purchase.checkout.cart-line-item.render-after
* purchase.checkout.cart-line-list.render-after
* purchase.checkout.contact.render-after
* purchase.checkout.delivery-address.render-after
* purchase.checkout.delivery-address.render-before
* purchase.checkout.footer.render-after
* purchase.checkout.header.render-after
* purchase.checkout.payment-method-list.render-after
* purchase.checkout.payment-method-list.render-before
* purchase.checkout.pickup-location-list.render-after
* purchase.checkout.pickup-location-list.render-before
* purchase.checkout.pickup-location-option-item.render-after
* purchase.checkout.pickup-point-list.render-after
* purchase.checkout.pickup-point-list.render-before
* purchase.checkout.reductions.render-after
* purchase.checkout.reductions.render-before
* purchase.checkout.shipping-option-item.details.render
* purchase.checkout.shipping-option-item.render-after
* purchase.checkout.shipping-option-list.render-after
* purchase.checkout.shipping-option-list.render-before
* purchase.thank-you.announcement.render
* purchase.thank-you.block.render
* purchase.thank-you.cart-line-item.render-after
* purchase.thank-you.cart-line-list.render-after
* purchase.thank-you.customer-information.render-after
* purchase.thank-you.footer.render-after
* purchase.thank-you.header.render-after
## Properties
* **color**
**'base' | 'subdued'**
**Default: 'base'**
Controls the visual weight and emphasis of the badge.
* `base`: Standard weight with moderate emphasis, suitable for most use cases.
* `subdued`: Reduced visual weight for less prominent or secondary badges.
* **icon**
**'' | ReducedIconTypes**
**Default: ''**
An icon displayed inside the badge to provide additional visual context or reinforce the badge's meaning. Set to an empty string to display no icon.
* **iconPosition**
**'start' | 'end'**
The position of the icon relative to the badge text.
* `start`: Places the icon before the text.
* `end`: Places the icon after the text.
* **id**
**string**
A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting.
* **size**
**'small' | 'base' | 'small-100'**
**Default: 'base'**
The size of the badge.
* `base`: The default size, suitable for most use cases.
* `small`: A smaller badge for compact layouts.
* `small-100`: The smallest badge for tight spaces or dense lists.
* **tone**
**'auto' | 'neutral' | 'critical'**
**Default: 'auto'**
The semantic meaning and color treatment of the badge.
* `auto`: Automatically determined based on context.
* `neutral`: General information without specific intent.
* `critical`: Urgent problems or destructive actions.
### ReducedIconTypes
The subset of icon types available in checkout and customer account surfaces. This is a narrowed set from the full Shopify icon library, containing only the icons supported in these contexts.
```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
### Examples
* #### Code
##### Default
```html
Default
Expired
Free
```