Badge

Import

import { Badge } from "@retents/ui/badge"

Usage Guidelines

When to use

• To display a short status label such as "Active", "Pending", or "Error" next to an item.
• To categorize or tag content with a visual indicator (e.g., feature labels, plan tiers).
• To communicate severity or state using semantic variants — default for neutral, success for positive, destructive for errors.

When NOT to use

• For interactive actions — use Button instead. Badges are display-only.
• For longer descriptive messages — use Alert instead.
• For counts or notifications that overlay an icon — consider a custom notification dot.

Preview

Variants

<Badge>Default</Badge>
<Badge variant="secondary">Secondary</Badge>
<Badge variant="destructive">Destructive</Badge>
<Badge variant="success">Success</Badge>
<Badge variant="outline">Outline</Badge>

Props