Tag

Удаляемые и кликабельные теги, группы с «+N». Бесплатно, MIT · Базовые элементы › Метки и подсказки

Установка

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 — Статусы и метки
Avatar — Аватары пользователей
Tooltip — Всплывающие подсказки
Separator — Разделители
Button — Кнопки всех типов
Icon Button — Кнопка с иконкой
Color Mode Switch — Светлая, тёмная или системная: выбор сохраняется, применяется до первого кадра, синхронизируется между вкладками и сменяется плавно
Button Group — Группы кнопок
Copy to Clipboard — Копирование с подтверждением
Icon — Любая иконка по правилам кита: размер от текста, штрих темы, зеркалирование в RTL, доступное имя; createIcon и галерея из 111 иконок
Kbd — Клавиши и сочетания: одна строка «mod+k» — ⌘K на Mac и Ctrl+K на остальных, для скринридера — словами
Highlight — Совпадения поиска в тексте: без учёта регистра и диакритики, несколько терминов своими цветами, готовые диапазоны, текущее совпадение