Badge
A small label used to highlight status, category or count.
$
Registry itembunx shadcn@latest add @nx-ui/badgeInstalls withutils
Used byai-chain-of-thoughtai-inline-citationai-toolapp-switcherdata-tableewc-selectorfilter-barkanbanlisting-cardlistings-filterslistings-panelmaterial-selectoropportunitiespricing-tableproject-scope-selector
Basic usage
The default badge, used for counts and short labels.
New3 sitesBatch #0412
Base variants
The shadcn-style base set: default, secondary, destructive, outline, ghost and link.
DefaultSecondaryDestructiveOutlineGhostLink
Untitled UI pill variants
Soft-tinted status pills for colour-coded categorisation across Nexus dashboards.
GrayBrandErrorWarningSuccessBlue
With icon or dot
A leading icon, or a plain coloured dot, marked with data-icon for tighter padding.
VerifiedNeeds reviewIn transitActiveArchived
As a link
Badge is polymorphic via `render` — pass an <a> to make it a clickable filter tag.
Feedstock intake log
Status pills inside a table — a realistic view of a Nexus ReGen collection round.
| Round | Site | Material | Status |
|---|---|---|---|
| RD-2231 | Barrowfield depot | Green waste | Delivered |
| RD-2232 | Millbrook transfer station | Digestate | In transit |
| RD-2233 | Wyke Common site | Woodchip | Moisture flagged |
| RD-2234 | Barrowfield depot | Contaminated load | Rejected |
API reference
Exported parts and their props, extracted from the component source.
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "default" | "secondary" | "destructive" | "outline" | "ghost" | "link" | … | "default" | — |
…extends useRender.ComponentProps<"span">