Badge

A small pill-shaped label used to annotate UI with status, counts, or categories. Reach for it to draw attention to a short piece of metadata sitting next to other content. Content is passed as children; the visual treatment is driven by the variant prop.

Variants

default for something the user picked or a live state, secondary for neutral metadata that shouldn't compete with the content, destructive for a failure.

Live Queued Declined

Which surface it sits on

A chip on a Card uses secondary, contrasting against the surface underneath. A chip directly on the page background uses bg-card instead — bg-secondary is nearly invisible on bg-background in light mode. This is the one place the rule flips based on what's behind it.

On the page Draft

Inside a card

Draft

Status and counts

A badge annotates something else — it is never the content itself. Beside a label it reads as that thing's state; holding a number it reads as a count of what the label names.

Deployment Live
Build Queued
Payment Declined
Notifications 12

API

Prop Type Default Description
children required import('svelte').Snippet

Badge content.

variant 'default'|'secondary'|'destructive' 'default'

Visual treatment of the badge.

class string

Additional Tailwind classes merged onto the root element.