Design system

Badge

Compact labels for categories, counts, and short metadata.

Built on Workshop1 compositionUpstream API
DefaultSecondaryOutlineReviewOverdueApprovedView guidance

Usage

import { Badge } from "@workshop1/ui/components/badge"

Use a badge for a category, count, or small piece of metadata. Use StatusChip when the label represents a workflow state. The variants are semantic: warning calls for attention, destructive identifies danger, and outline keeps supporting metadata quiet.

Badges may become links with asChild. Keep the anchor semantics and a useful destination, as shown above. Icons are optional and should support the label rather than replace it.

Accessibility

Do not communicate meaning through colour alone. Keep the visible text specific, and do not use a badge as an unlabelled button.