Badge
A small label component for displaying status or counts.
A badge component for status indicators and labels.
Variants
Default
Default
Secondary
Secondary
Outline
Outline
Destructive
Destructive
Usage
import { Badge } from "@delphi/ui";
export function Example() {
return (
<div className="flex gap-2">
<Badge>New</Badge>
<Badge variant="secondary">Beta</Badge>
<Badge variant="outline">v1.0</Badge>
</div>
);
}API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "default" | "secondary" | "outline" | "destructive" | "default" | 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 destructive 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