Tag

Removable and clickable tags, groups with +N. Free, MIT · Basics › Labels and tooltips

Installation

npx valyro-cli@latest add tag

npx shadcn@latest add https://valyro.xyz/r/tag.json

npm install valyro-ui

import 'valyro-ui/styles.css';
import { Tag } from 'valyro-ui';

Prop	Type	Default
`color`	`BadgeColor`	`'gray'`	Hue, as on Badge.
`variant`	`'subtle' \| 'solid' \| 'outline'`	`'subtle'`	`subtle` tinted fill, `solid` saturated fill, `outline` a tinted ring — as on Badge.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Height, padding and text size.
`icon`	`ReactNode`		An icon or a small avatar before the text.
`onRemove`	`() => void`		Shows a × button; called on its click and on Delete or Backspace while the tag has focus.
`onClick`	`(event: MouseEvent<HTMLButtonElement>) => void`		Makes the tag's text a button (a filter, "open").
`href`	`string`		Makes the tag's text a link.
`disabled`	`boolean`	`false`	Neither the text nor the × responds.
`textValue`	`string`		The tag's text for the remove button's name and announcements, when the children are not plain text.
`labels`	`Partial<TagLabels>`		Overrides for the built-in English text; keys left out keep their defaults.

Badge — Status labels and tags
Avatar — User avatars
Tooltip — Hover and focus hints
Separator — Dividers
Button — Buttons in every variant
Icon Button — Icon-only button
Color Mode Switch — Light, dark or system: the choice is saved, painted before the first frame, synced across tabs and cross-faded
Button Group — Grouped buttons
Copy to Clipboard — Copy with confirmation
Icon — Any icon on the kit’s rules: size from the text, the theme’s stroke, RTL mirroring, an accessible name; createIcon and a gallery of 111 icons
Kbd — Keyboard keys and shortcuts: one "mod+k" string shows ⌘K on a Mac and Ctrl+K elsewhere, read aloud as words
Highlight — Search hits marked in text: case and accents ignored, several terms in their own tones, ready-made ranges, the current hit

Previous: Badge · Next: Avatar · All Basics