Badge
Emphasize details with a status indicator
import { Badge } from "@plexui/ui/components/Badge";Examples
Overview
Successful
In progress
Failed
Beta
Caution
Colors & variants
secondary
success
warning
danger
info
discovery
caution
soft
Sample
Sample
Sample
Sample
Sample
Sample
Sample
solid
Sample
Sample
Sample
Sample
Sample
Sample
Sample
outline
Sample
Sample
Sample
Sample
Sample
Sample
Sample
Size & roundness
size
New
Icon
Beta
Loading
In progress
Reference
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | — | Content inside the badge |
color | "secondary" | "success" | "danger" | "warning" | "info" | "discovery" | "caution" | "secondary" | Semantic color |
variant | "solid" | "soft" | "outline" | "soft" | Style variant |
size | "sm" | "md" | "lg" | "sm" | Badge size |
pill | boolean | false | Fully rounded |