Badge

Displays a badge or a component that looks like a badge.

Variants

SBadge({ text: 'Badge' })
SBadge({ text: 'Secondary', variant: 'secondary' })
SBadge({ text: 'Destructive', variant: 'destructive' })
SBadge({ text: 'Outline', variant: 'outline' })

Approximate web preview — the HarmonyOS rendering is the reference.

Status tones

success | warning | info, solid or soft (tinted).

SBadge({ text: 'Success', variant: 'success' })
SBadge({ text: 'Warning', variant: 'warning' })
SBadge({ text: 'Info', variant: 'info' })
// soft: tinted background, coloured text
SBadge({ text: 'Default', soft: true })
SBadge({ text: 'Success', variant: 'success', soft: true })
SBadge({ text: 'Warning', variant: 'warning', soft: true })
SBadge({ text: 'Info', variant: 'info', soft: true })
SBadge({ text: 'Destructive', variant: 'destructive', soft: true })

Approximate web preview — the HarmonyOS rendering is the reference.

With icons

Leading / trailing lucide icons, or any content in the slot.

SBadge({ text: 'Verified', variant: 'secondary', icon: 'circle-check' })
SBadge({ text: '8', variant: 'destructive' })
SBadge({ text: 'Link', variant: 'outline', iconRight: 'arrow-right' })
SBadge({ variant: 'outline' }) {
  SSpinner({ sizing: 12 })
  Text('Syncing').fontSize(12)
}

Approximate web preview — the HarmonyOS rendering is the reference.

Sizes & shapes

sizing: 'sm' | 'default' | 'lg'; pill: rounded-full.

SBadge({ text: 'Small', sizing: 'sm' })
SBadge({ text: 'Default' })
SBadge({ text: 'Large', sizing: 'lg' })
SBadge({ text: 'Pill', pill: true, variant: 'secondary' })
SBadge({ text: 'Large pill', pill: true, sizing: 'lg', variant: 'outline', icon: 'star' })

Approximate web preview — the HarmonyOS rendering is the reference.

Dot & count

Status dots, bare dots and notification counts with a max.

SBadge({ text: 'Online', variant: 'success', soft: true, dot: true, pill: true })
SBadge({ text: 'Away', variant: 'warning', soft: true, dot: true, pill: true })
SBadge({ text: 'Offline', variant: 'outline', dot: true, dotColor: theme.colors.mutedForeground, pill: true })
SBadge({ dot: true, variant: 'destructive' })      // bare 8vp dot
SBadge({ count: 8, variant: 'destructive' })
SBadge({ count: 128, variant: 'destructive' })      // "99+"
SBadge({ count: 1200, max: 999 })                   // "999+"
// over an icon
Stack({ alignContent: Alignment.TopEnd }) {
  SIcon({ name: 'bell', sizing: 24 })
  SBadge({ count: 3, variant: 'destructive', sizing: 'sm' }).translate({ x: 8, y: -6 })
}

Approximate web preview — the HarmonyOS rendering is the reference.

Removable

removable adds a × that emits onRemove (tags, filters).

@Local tags: string[] = ['react', 'vue', 'svelte', 'arkts'];

ForEach(this.tags, (t: string) => {
  SBadge({ text: t, variant: 'secondary', removable: true,
    onRemove: () => this.tags = this.tags.filter((x: string) => x !== t) })
}, (t: string) => t)

Approximate web preview — the HarmonyOS rendering is the reference.

API

Extracted from the @Param / @Event / @BuilderParam declarations in the library sources.

SBadge

shadcn-vue Badge: inline-flex items-center gap-1 rounded-md border px-2 py-0.5 text-xs font-medium.

Variants: default | secondary | destructive | outline | success | warning | info, each soft (tinted) if wanted. sizing sm | default | lg, pill (rounded-full), dot (leading status dot — or a bare 8vp dot when there is no text), removable (trailing ×, emits onRemove) and count / max for notification counts ("99+"; hidden at 0 unless showZero).

Prop	Type	Default	Description
text	ResourceStr | undefined	undefined
variant	BadgeVariant BadgeVariant = 'default' | 'secondary' | 'destructive' | 'outline' | 'success' | 'warning' | 'info'	'default'
soft	boolean	false	Tinted background with coloured text instead of a solid fill.
sizing	BadgeSize BadgeSize = 'sm' | 'default' | 'lg'	'default'
pill	boolean	false	Fully rounded (rounded-full). Count badges are always pills.
dot	boolean	false	Leading status dot; without text / count the badge is just the dot.
dotColor	ResourceColor | undefined	undefined	Overrides the dot colour.
icon	string | undefined	undefined	Leading lucide icon name.
iconRight	string | undefined	undefined	Trailing lucide icon name.
count	number | undefined	undefined	Numeric badge (takes precedence over text).
max	number	99	Above max the count reads "max+". 0 = no cap.
showZero	boolean	false	Keep a count badge visible at 0.
removable	boolean	false	Trailing × that emits onRemove (tags, filters).
modifier	AttributeModifier<RowAttribute>	new SparkNoopModifier<RowAttribute>()
tokens	BadgeTokens	{}	Per-instance token overrides (instance → theme --badge-* → recipe), see {@link BadgeTokens}.

Event	Type	Default	Description
onRemove	() => void	() => { }

Slots: children (trailing closure)