SBadge <s-badge>

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

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" | "status" | "adjust" | "affiliate" | "airplane" | "alert-bubble" | "alert-circle" … (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.