Data Display
Badge
Small inline pill for statuses and labels, with semantic color variants.
A small inline pill for statuses and labels. It renders semantic color variants and forwards every native <span> attribute.
Import
tsx
1import { Badge } from "@yuhuanowo/yunui";Variants
Variants
DefaultSuccessWarningErrorInfo
Structural variants
secondary, outline and destructive round out the palette for shadcn-style call sites (destructive is an alias of error).
Structural variants
SecondaryOutlineDestructive
In context
Badges sit naturally next to text to convey state at a glance.
Inline status
Claude Opus 4.8 Active
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "default" | "secondary" | "outline" | "destructive" | "error" | "success" | "warning" | "info" | default | Semantic colors: `default` (neutral), `success`, `warning`, `error`, `info`. Plus structural variants for shadcn-style call sites: `secondary`, `outline`, and `destructive` (alias of `error`). |