--- 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. api_version: 2026-04 api_name: customer-account-ui-extensions source_url: html: >- https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/feedback-and-status-indicators/badge md: >- https://shopify.dev/docs/api/customer-account-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/customer-account-ui-extensions/latest/web-components/typography-and-content/chip) instead. For prominent, dismissible messages that require customer action, use [banner](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/feedback-and-status-indicators/banner). Badges are read-only indicators. They can't contain links, buttons, or other interactive elements. ### Support Targets (24) ### Supported targets * [customer-account.​footer.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/footer#footer-render-after-) * [customer-account.​order-index.​announcement.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/order-actions#order-index-announcement-) * [customer-account.​order-index.​block.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/order-actions#order-index-block-) * [customer-account.​order-status.​announcement.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/order-status#order-status-announcement-) * [customer-account.​order-status.​block.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/order-status#order-status-block-) * [customer-account.​order-status.​cart-line-item.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/order-status#cart-line-item-render-after-) * [customer-account.​order-status.​cart-line-list.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/order-status#cart-line-list-render-after-) * [customer-account.​order-status.​customer-information.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/order-status#customer-information-render-after-) * [customer-account.​order-status.​fulfillment-details.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/fulfillment-status#fulfillment-status-targets) * [customer-account.​order-status.​payment-details.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/payments-and-returns#payments-and-returns-targets) * [customer-account.​order-status.​return-details.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/payments-and-returns#return-details-render-after-) * [customer-account.​order-status.​unfulfilled-items.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/fulfillment-status#unfulfilled-items-render-after-) * [customer-account.​order.​action.​menu-item.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/order-actions#order-action-menu-item-) * [customer-account.​order.​action.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/order-actions#order-action-) * [customer-account.​order.​page.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/full-page#order-specific-full-page-) * [customer-account.​page.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/full-page#customer-account-full-page-) * [customer-account.​profile.​addresses.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/profile-page-default#profile-page-default-targets-) * [customer-account.​profile.​announcement.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/profile-page-default#profile-announcement-) * [customer-account.​profile.​block.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/profile-page-default#profile-block-) * [customer-account.​profile.​company-details.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/profile-page-b2b#profile-page-b2b-targets-) * [customer-account.​profile.​company-location-addresses.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/profile-page-b2b#company-location-addresses-render-after-) * [customer-account.​profile.​company-location-payment.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/profile-page-b2b#company-location-payment-render-after-) * [customer-account.​profile.​company-location-staff.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/profile-page-b2b#company-location-staff-render-after-) * customer-account.​profile.​payment.​render-after #### Use cases * **Order and fulfillment statuses**: Communicate states like "Delivered", "In transit", or "Canceled" so customers can scan their order list quickly. * **Subscription states**: Indicate whether a subscription is active, paused, or expiring soon. * **Membership tiers**: Label loyalty or rewards tiers alongside customer account information. * **Product availability**: Surface stock or availability labels like "Available" or "Sold out". *** ## 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** **'base' | 'small' | '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 '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' | 'cart' | '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' | 'note' | 'order' | 'organization' | 'plus' | 'profile' | 'question-circle-filled' | 'question-circle' | 'reorder' | 'return' | 'savings' | 'settings' | 'star-filled' | 'star-half' | 'star' | 'store' | 'truck' | 'upload' | 'x-circle-filled' | 'x-circle' | 'x' ``` *** ## Examples ### Show an order status Display badges to communicate statuses. This example renders badges in default, critical, and neutral tones with single word labels. ## Show an order status ![A small status badge displaying a label in a colored pill shape.](https://shopify.dev/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/badge-default-Cv6jGCns.png) ## html ```html Default Expired Free ``` ### Indicate a subscription status Place a badge alongside related content to provide status context. This example shows a "Paused" badge with `color="subdued"` next to subscription details. ## html ```html Subscription Mini garden seeds $35.00 monthly Paused ``` ### Highlight a critical status Use the `critical` and `warning` tones to draw attention to statuses that require customer action. This example pairs a critical badge with an icon and a warning badge side by side. ## html ```html Action required Expiring soon ``` *** ## 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 "Available", "Complete", "Delivered", or "Delayed" 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. ***