Badge

SBadge is a compact status label (a counter, tag, or state). Plain CSS on semantic tokens, no dependencies.

Variants

NeutralPrimaryPositiveWarningNegative

<template>
  <SBadge variant="neutral">Neutral</SBadge>
  <SBadge variant="primary">Primary</SBadge>
  <SBadge variant="positive">Positive</SBadge>
  <SBadge variant="warning">Warning</SBadge>
  <SBadge variant="negative">Negative</SBadge>
</template>

Sizes

smmd

<template>
  <SBadge size="sm">sm</SBadge>
  <SBadge size="md">md</SBadge>
</template>

Color

The color prop sets a color from the palette (primary, teal, teal-10) and overrides the variant color. The filled primary variant also accepts text-color; for the soft variants the color applies to both the tint and the text.

tealdeep-purplesoft indigolight-blue-3

<template>
  <SBadge
    variant="primary"
    color="teal"
  >
    teal
  </SBadge>
  <SBadge
    variant="primary"
    color="deep-purple"
  >
    deep-purple
  </SBadge>
  <SBadge
    variant="positive"
    color="indigo"
  >
    soft indigo
  </SBadge>
  <SBadge
    variant="primary"
    color="light-blue-3"
    text-color="dark"
  >
    light-blue-3
  </SBadge>
</template>

Icons

icon renders a leading icon, icon-right a trailing one (registry names).

DoneDraft

<template>
  <SBadge
    variant="positive"
    icon="check"
  >
    Done
  </SBadge>
  <SBadge
    variant="neutral"
    icon-right="x"
  >
    Draft
  </SBadge>
</template>

API

Props

Name	Type	Default	Description
variant	| "primary" | "positive" | "negative" | "warning" | "neutral"	"neutral"	Color variant: neutral or semantic (primary/positive/warning/negative).
color	string	undefined	Accent color: a name from the palette (primary/teal/teal-10). Overrides the variant color.
text-color	string	undefined	Text/icon color on the fill: a name from the palette. White by default (set it for light color values).
size	"md" | "sm" | "lg"	"md"	Size: sm, md or lg.
square	boolean	undefined	Square corners: removes the border radius (rounded by default).
icon	string	undefined	Leading icon: a registry name or a raw SVG path.
icon-right	string	undefined	Trailing icon: a registry name or a raw SVG path.

Slots

Name	Description
default	Badge content (text, number).