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 instead. For prominent, dismissible messages that require customer action, use banner.
Badges are read-only indicators. They can't contain links, buttons, or other interactive elements.
Supported targets
- customer-account.
footer. render-after - customer-account.
order-index. announcement. render - customer-account.
order-index. block. render - customer-account.
order-status. announcement. render - customer-account.
order-status. block. render - customer-account.
order-status. cart-line-item. render-after - customer-account.
order-status. cart-line-list. render-after - customer-account.
order-status. customer-information. render-after - customer-account.
order-status. fulfillment-details. render-after - customer-account.
order-status. payment-details. render-after - customer-account.
order-status. return-details. render-after - customer-account.
order-status. unfulfilled-items. render-after - customer-account.
order. action. menu-item. render - customer-account.
order. action. render - customer-account.
order. page. render - customer-account.
page. render - customer-account.
profile. addresses. render-after - customer-account.
profile. announcement. render - customer-account.
profile. block. render - customer-account.
profile. company-details. render-after - customer-account.
profile. company-location-addresses. render-after - customer-account.
profile. company-location-payment. render-after - customer-account.
profile. company-location-staff. render-after - customer-account.
profile. payment. render-after
Supported targets
- customer-account.
footer. render-after - customer-account.
order-index. announcement. render - customer-account.
order-index. block. render - customer-account.
order-status. announcement. render - customer-account.
order-status. block. render - customer-account.
order-status. cart-line-item. render-after - customer-account.
order-status. cart-line-list. render-after - customer-account.
order-status. customer-information. render-after - customer-account.
order-status. fulfillment-details. render-after - customer-account.
order-status. payment-details. render-after - customer-account.
order-status. return-details. render-after - customer-account.
order-status. unfulfilled-items. render-after - customer-account.
order. action. menu-item. render - customer-account.
order. action. render - customer-account.
order. page. render - customer-account.
page. render - customer-account.
profile. addresses. render-after - customer-account.
profile. announcement. render - customer-account.
profile. block. render - customer-account.
profile. company-details. render-after - customer-account.
profile. company-location-addresses. render-after - customer-account.
profile. company-location-payment. render-after - customer-account.
profile. company-location-staff. render-after - customer-account.
profile. payment. render-after
Anchor to PropertiesProperties
Configure the following properties on the badge component.
- Anchor to colorcolorcolor'base' | 'subdued''base' | 'subdued'Default: 'base'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.
- Anchor to iconiconicon'' | ReducedIconTypes'' | ReducedIconTypesDefault: ''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.
- Anchor to iconPositioniconPositioniconPosition'start' | 'end''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.
- Anchor to idididstringstring
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.
- Anchor to sizesizesize'base' | 'small' | 'small-100''base' | 'small' | 'small-100'Default: 'base'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.
- Anchor to tonetonetone'auto' | 'neutral' | 'critical''auto' | 'neutral' | 'critical'Default: 'auto'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.
'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'Anchor to ExamplesExamples
Anchor to Show an order statusShow 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
html
Anchor to Indicate a subscription statusIndicate 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
Anchor to Highlight a critical statusHighlight 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
Anchor to Best practicesBest 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
neutralfor standard indicators andcriticalfor urgent statuses. Adjust visual intensity with thecolorproperty —subduedreduces emphasis whilebasekeeps 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.