SBadge <s-badge>

A small label that shows the status of an object, such as an order, payment or fulfillment. SBadge is the typed Vue 3 wrapper for Shopify's Polaris <s-badge> web component.

import { SBadge } from 'polaris-vue-elements'

Best practices

• Pick the size for the context. Use size="base" in table cells, list items, or anywhere several badges sit together. Reserve size="large" for a single badge that deserves emphasis, such as the main status shown at the head of a page.
• Keep labels to one or two words. Short labels like "Fulfilled" or "Out of stock" scan quickly. Write statuses in the past tense, so "Refunded" rather than "Refund".
• Match the tone to the status. Use tone="critical" for errors or urgent issues that need action, tone="warning" for problems that need attention, tone="success" for positive confirmations, and tone="info" for neutral statuses. Give the same status the same tone everywhere in your app.
• Keep badges next to what they describe. In a list item, put the badge near the title. In a table, give badges their own column so merchants can scan it.
• Use badges only for system statuses. Badges are static indicators set by the system, so don't use them for tags merchants create or for items they can remove.

<SBadge tone="success">Fulfilled</SBadge>
<SBadge tone="warning">Partially refunded</SBadge>

See Shopify's best practices for <s-badge> for the full guidance.

Example

NeutralInfoSuccessCautionWarningCritical

With iconLargeStrong color

<script setup>
import { SBadge } from 'polaris-vue-elements'
</script>

<template>
  <SBadge tone="neutral">Neutral</SBadge>
  <SBadge tone="info">Info</SBadge>
  <SBadge tone="success">Success</SBadge>
  <SBadge tone="caution">Caution</SBadge>
  <SBadge tone="warning">Warning</SBadge>
  <SBadge tone="critical">Critical</SBadge>

  <SBadge tone="success" icon="check-circle">With icon</SBadge>
  <SBadge tone="info" size="large">Large</SBadge>
  <SBadge tone="info" color="strong">Strong color</SBadge>
</template>

Props

Prop	Type	Description
color	"base" | "strong"	Controls the visual weight and emphasis of the badge. - base: Standard weight with moderate emphasis, suitable for most use cases. - strong: Increased visual weight for higher emphasis and prominence.
icon	"color" | "info" | "adjust" | "affiliate" | "airplane" | "alert-bubble" | "alert-circle" | "alert-diamond" … (553 more)	An icon displayed inside the badge to provide additional visual context or reinforce the badge's meaning. Accepts any icon name from the icon library or a custom string identifier.
size	"base" | "large" | "large-100"	The size of the badge. - base: Default size suitable for most badge use cases. - large: Larger badge for increased visibility and prominence. - large-100: Extra large badge for maximum visibility in emphasized contexts.
tone	"auto" | "neutral" | "info" | "success" | "caution" | "warning" | "critical"	The semantic meaning and color treatment of the component. - info: Informational content or helpful tips. - success: Positive outcomes or successful states. - warning: Important warnings about potential issues. - critical: Urgent problems or destructive actions. - auto: Automatically determined based on context. - neutral: General information without specific intent. - caution: Advisory notices that need attention.

Some type columns above are truncated for readability; the full union is available in the library's generated TypeScript types (src/lib/generated/types.ts).

Slots

Slot	Description
default	The text label displayed within the badge component, typically a short status indicator or category label.