Badge
A small label component for displaying status or counts.
A badge component for status indicators and labels.
Variants
Subtle
Subtle
Solid
Solid
Outline
Outline
Ghost
Ghost
Status Variants
Success
Success
Danger
Danger
Warning
Warning
Pending
Pending
Usage
import { Badge } from "@delphi/ui";
export function Example() {
return (
<div className="flex gap-2">
<Badge variant="subtle">New</Badge>
<Badge variant="solid">Solid</Badge>
<Badge variant="outline">v1.0</Badge>
</div>
);
}API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "subtle" | "solid" | "success" | "danger" | "warning" | "pending" | "outline" | "ghost" | "subtle" | Visual style variant |
className | string | - | Additional CSS classes |
Use badges for status indicators, counts, or labels
Keep badge text very short — 1-2 words maximum
Use consistent variants for similar types of information
Use the danger variant sparingly for warnings or errors
Position badges consistently relative to the content they label
Use badges for long text — they're meant for quick glances
Make badges interactive — they're display-only elements
Overuse badges on a single view — they lose impact
Use color alone to convey meaning — include text for accessibility