Badge
Status and metadata label with six variants including success and warning.
Preview
DefaultSecondaryOutlineDestructiveSuccessWarning
Installation
bash
npx shadcn@latest add @layout/badgeUsage
tsx
import { Badge } from "@/components/ui/badge"Examples
With icons
PublishedDraftlayout.md
As status indicators in context
ExtractionComplete
SynthesisIn progress
ExportPending
Guidelines for AI agents
Compact status indicators, counts, and metadata. Use success/warning/destructive to communicate state, secondary or outline for neutral metadata.
Never
- Neveruse badges as interactive buttons; wrap actions in Button
- Neverrely on colour alone for status; keep the text meaningful
Tokens consumed
--layout-primary--layout-secondary--layout-danger--layout-success--layout-warning--layout-border