Badge
A small label that states a fact.
Variants
Four weights, the same four names the Button uses.
DefaultSecondaryDestructiveOutline
A count, a status, a version. A badge is not a button: it says what something is, it does not invite a click. When it does need to navigate, hand it a link.
Installation
npx philcn@latest add badgeThe file is written into your project. It is yours from then on — change it as you like.
Examples
As a link
The badge's looks on a real anchor, so it behaves like the link it is.
Props
| Prop | Type | What it does |
|---|---|---|
| Badge.variant | "default" | "destructive" | "outline" | "secondary" | null | Which of the four looks to wear. |
| Badge.asChild | boolean | Styles the single child instead of rendering a <span>. |
| Badge.render | ReactElement<unknown, string | JSXElementConstructor<any>> | The same thing, the shadcn spelling. |
Types are read from the library itself, so this table cannot describe an option the code no longer has. Everything else you pass goes straight to the underlying <span>.