Badge
StableBadges are used to highlight status, categories, or labels. Available in multiple semantic variants.
Variants
Semantic badge variants for different contexts.
SectionAccentSuccessErrorWarningInfo
With Dot
Badges can include a status dot indicator.
ActiveOnlineOffline
Sizes
Three size options for different contexts.
SmallMediumLarge
tsx
import { Badge } from "@/components/ui/Badge";
<Badge variant="accent" dot>
Active
</Badge>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "section" | "accent" | "success" | "error" | "warning" | "info" | "section" | Visual style variant |
| size | "sm" | "md" | "lg" | "md" | Badge size |
| dot | boolean | false | Show status dot indicator |
| children | ReactNode | — | Badge content |