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
import { Badge } from "@yuhuanowo/yunui";
Variants
Variants
DefaultSuccessWarningErrorInfo
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" | "error" | "success" | "warning" | "info" | default | Semantic color: `default` (neutral), `success`, `warning`, `error`, or `info`. |