Skip to main content
Badges are small, pill-shaped labels for status indicators, counts, and categories. They’re inline elements that sit naturally alongside text or within cards.

​
Basic Usage

​
Variants

Eight variants cover the most common use cases — five base styles from shadcn plus three semantic colors for status indicators.

​
Examples

Badges pair well with cards and other layout components as inline status indicators. Badge is a container component, so you can compose children for richer content — icons, loaders, or custom ordering.

​
API Reference

Badge Parameters

​
str | None
default:"None"
Badge text. Can be passed as a positional argument. When using children, omit the label and compose content directly.
​
str
default:"default"
Visual style: "default", "secondary", "destructive", "outline", "ghost", "success", "warning", "info".
​
str | None
default:"None"
Additional Tailwind CSS classes appended to the component’s built-in styles.

​
Protocol Reference

Badge
For the complete protocol schema, see Badge.