React badge component for status indicators and inline labels with semantic colors, multiple variants, icon support, and loading state

import { Badge } from "@plexui/ui/components/Badge";

Examples

Successful

In progress

Failed

Beta

Caution

secondary

success

warning

danger

info

discovery

caution

soft

Sample

solid

Sample

outline

Sample

size

pill

New

Beta

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