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

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

​
Protocol Reference

Badge
{
  "type": "Badge",
  "children?": "[Component]",
  "let?": "object",
  "label?": "string",
  "variant?": "default | secondary | destructive | success | warning | info | outline | ghost",
  "cssClass?": "string"
}
For the complete protocol schema, see Badge.