Badge
Live example
Badge
Installation
npx shadcn@latest add https://hextech-ui.vercel.app/r/badge.jsonAPI reference
These are the main Badge options. See the exported TypeScript types for inherited native or primitive props.
| Prop | Type | Default |
|---|---|---|
tone | gold | teal | success | warning | destructive | neutral | gold |
Status text
Use a short readable label as well as the tone. Badge is not interactive. Place it beside the content it describes rather than using color alone to convey status.