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.

​
In Context

Badges pair well with cards and other layout components as inline status indicators:

​
API Reference

Badge Parameters

​
label
str
required
Badge text. Can be passed as a positional argument.
​
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",
  "label": "string (required)",
  "variant?": "default | secondary | destructive | success | warning | info | outline | ghost",
  "cssClass?": "string"
}
For the complete protocol schema, see Badge.