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"	Modify the color to be more or less intense.
icon	"color" | "info" | "adjust" | "affiliate" | "airplane" | "alert-bubble" | "alert-circle" | "alert-diamond" … (510 more)	The type of icon to be displayed in the badge.
size	"base" | "large" | "large-100"	Adjusts the size.
tone	"auto" | "neutral" | "info" | "success" | "caution" | "warning" | "critical"	Sets the tone of the Badge, based on the intention of the information being conveyed.

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 content of the Badge.