Status indicators, notification tags, and label chips.
default / secondaryGeneral metadata tags, category filters, counts descriptionssuccessCompleted actions, online status, valid forms updatesinfoHelpful tips, announcements, secondary updates noteswarningPending actions, warnings, warning alerts thresholdsdestructiveErrors, failures, offline statuses, system blockingneon / gradientCalling interest to sponsored badges or upgraded plansVisual style of the badge label
Size dimensions of the badge
Show a small status indicator dot
Animate status dot with a pulse effect
Badge text content
import { Badge } from "nexoreui"
<Badge>
New
</Badge>| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "default" | "secondary" | "destructive" | "success" | "warning" | "info" | "outline" | "gradient" | "neon" | "default" | Visual style of the badge label. |
| size | "default" | "sm" | "lg" | "default" | Responsive text scaling. |
| dot | boolean | false | Renders a small status indicator dot on the left. |
| pulse | boolean | false | Enables repeating scaling animation on the status dot. |
| children* | React.ReactNode | — | Text label or element contents. |
aria-live="polite".