Tag
A small removable pill for filter chips, selected values and the tags-input control, with optional status dot, count badge and close button.
$
Registry itembunx shadcn@latest add @nx-ui/tagInstalls withutils
Sizes
SmallMediumLarge
Status dots
A leading dot conveys the state of a movement or organisation.
DraftSubmittedVerifiedUnder reviewRejected
With count
Soil samples24Verified sites8
Removable
Click the X to remove; the demo keeps a live list.
PeatlandGrasslandWoodland
API reference
Exported parts and their props, extracted from the component source.
| Prop | Type | Default | Description |
|---|---|---|---|
size | "sm" | "md" | "lg" | "md" | — |
dot | keyof typeof dotColour | — | Show a leading status dot in the given colour. |
count | React.ReactNode | — | Optional trailing count badge. |
onRemove | () => void | — | When set, renders a trailing close button and calls this on click. |
…extends React.ComponentProps<"span">