--- title: Badge description: >- Displays compact status indicators like delivery estimates or discount labels in checkout extensions. 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 badges to communicate object states, order statuses, or system-generated classifications that help buyers 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/latest/web-components/typography-and-content/chip) instead. Badges are read-only indicators. They can't contain links, buttons, or other interactive elements. ### Support Targets (29) ### Supported targets * [purchase.​checkout.​actions.​render-before](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/targets/checkout/navigation#navigation-target) * [purchase.​checkout.​block.​render](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/targets/checkout/block#block-target) * [purchase.​checkout.​cart-line-item.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/targets/checkout/order-summary#line-item-targets) * [purchase.​checkout.​cart-line-list.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/targets/checkout/order-summary#checkout-cart-line-list-) * [purchase.​checkout.​contact.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/targets/checkout/information#information-target) * [purchase.​checkout.​delivery-address.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/targets/checkout/shipping#render-after-delivery-address-) * [purchase.​checkout.​delivery-address.​render-before](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/targets/checkout/shipping#delivery-address-targets) * [purchase.​checkout.​footer.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/targets/checkout/footer#footer-target) * [purchase.​checkout.​header.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/targets/checkout/header#header-target) * [purchase.​checkout.​payment-method-list.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/targets/checkout/payment#render-after-payment-methods-) * [purchase.​checkout.​payment-method-list.​render-before](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/targets/checkout/payment#payment-targets) * [purchase.​checkout.​pickup-location-list.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/targets/checkout/local-pickup#render-after-pickup-locations-) * [purchase.​checkout.​pickup-location-list.​render-before](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/targets/checkout/local-pickup#location-list-targets) * [purchase.​checkout.​pickup-location-option-item.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/targets/checkout/local-pickup#location-option-item-target) * [purchase.​checkout.​pickup-point-list.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/targets/checkout/pickup-points#render-after-pickup-points-) * [purchase.​checkout.​pickup-point-list.​render-before](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/targets/checkout/pickup-points#pickup-points-targets) * [purchase.​checkout.​reductions.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/targets/checkout/order-summary#checkout-reductions-after-) * [purchase.​checkout.​reductions.​render-before](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/targets/checkout/order-summary#reductions-targets) * [purchase.​checkout.​shipping-option-item.​details.​render](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/targets/checkout/shipping#shipping-option-item-targets) * [purchase.​checkout.​shipping-option-item.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/targets/checkout/shipping#render-after-shipping-option-) * [purchase.​checkout.​shipping-option-list.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/targets/checkout/shipping#render-after-shipping-options-) * [purchase.​checkout.​shipping-option-list.​render-before](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/targets/checkout/shipping#shipping-option-list-targets) * [purchase.​thank-you.​announcement.​render](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/targets/thank-you/announcement#thank-you-announcement-) * [purchase.​thank-you.​block.​render](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/targets/thank-you/block#block-target) * [purchase.​thank-you.​cart-line-item.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/targets/thank-you/order-summary#line-item-targets) * [purchase.​thank-you.​cart-line-list.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/targets/thank-you/order-summary#thank-you-cart-line-list-) * [purchase.​thank-you.​customer-information.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/targets/thank-you/information#information-target) * [purchase.​thank-you.​footer.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/targets/thank-you/footer#footer-target) * [purchase.​thank-you.​header.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/targets/thank-you/header#header-target) #### Use cases * **Discount and promotion status**: Label applied discounts or promotions with badges like "Applied", "Eligible", or "Limited" so buyers can quickly see what's active. * **Delivery estimates**: Display estimated delivery windows alongside line items to set buyer expectations. * **Payment method indicators**: Communicate payment method states such as "Saved" or "Preferred" next to stored payment options. * **Product availability**: Surface stock or availability labels like "Available", "Low stock", or "Pre-order" alongside line items. *** ## Properties Configure the following properties on the badge component. * **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 ### Show badges with different tones Render badges with different visual treatments. This example shows three `s-badge` elements: one with the default appearance, one with `tone="critical"`, and one with `color="subdued"`. ## Show badges with different tones ![A rendered example of the badge component](https://shopify.dev/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/badge-default-Cv6jGCns.png) ## html ```html Default Expired Free ``` ### Add an icon to a badge Add an icon beside a badge label to reinforce its meaning. This example sets `icon`, `iconPosition`, and `size` on `s-badge`. ## html ```html Arrives Wed ``` ### Group multiple status badges Lay out several badges in one horizontal row. This example nests three `s-badge` elements with default, `neutral`, and `critical` tones inside an `s-stack`. ## html ```html Paid Processing Requires action ``` *** ## Best practices * **Keep badge labels short**: Aim for one word per badge. For complex states that require two words, use sentence case. * **Use descriptive adjectives or past-tense verbs**: Labels like "Paid", "Free", "Expired", or "Processing" communicate status clearly. * **Match tone to urgency**: Use `neutral` for standard indicators and `critical` for urgent statuses. Adjust visual intensity with the `color` property. `subdued` reduces emphasis while `base` keeps the default appearance. * **Always attribute badges to an object**: A badge should appear alongside the item it describes, such as an order, subscription, or product. ***