Badge
A small pill for counts, tags and categories. For a status, reach for Status badge so the meaning has a dot and a tone.
bunx --bun shadcn@4.17.0 add @waimakers/badge- npm dependencies
- @base-ui/react@1.9.0class-variance-authority@0.7.1
From the registry
Accent as a FILL with an ink label; no orange-text variant.
Examples
Variants
Default is the accent fill with an ink label. Secondary and outline are quieter; destructive marks something that went wrong.
NewSkillInternalRevoked
With icons
Icons sit at 12px inside the pill.
Agent4 collaboratorsWeekly
As a link
Render a link to make a tag navigable. It keeps the link's role and focus ring.