Тег

Тег относит что-то к категории. Ещё его можно удалить, выбрать или открыть как ссылку. В некоторых системах его называют чипом.

Стабильный

Figma

Обзор

Использование

API

Доступность

Research

Hiking

Design

<tk-tag color="purple">Research</tk-tag>
<tk-tag color="teal">Hiking</tk-tag>
<tk-tag color="blue">Design</tk-tag>

Анатомия

Часть	Что это
`tk-tag`	плашка высотой 24px
слот по умолчанию	подпись из 1–3 слов; она называет всё, что делает тег
слот `leading`	иконка или аватар, по желанию; скрыты от скринридеров
кнопка удаления	✕ у удаляемого тега
значок состояния	+ или ✓ у выбираемого тега

Виды

Static

Status: open

Hiking

design

<tk-tag color="blue">Static</tk-tag>
<tk-tag color="blue" removable>Status: open</tk-tag>
<tk-tag color="teal" selectable selected>Hiking</tk-tag>
<tk-tag color="pink" href="/tags/design">design</tk-tag>

У каждого тега одна задача. Если задать несколько видов, removable важнее selectable, а selectable важнее href.

Статичный (по умолчанию): просто подпись. Фокус не получает.
removable: кнопка ✕, которая вызывает tk-remove. Тег не удаляет себя сам: его удаляет ваш обработчик и он же переводит фокус.
selectable: весь тег — переключатель, выключенный показывает +, включённый ✓. Подходит для панелей фильтров и списков выбора. change срабатывает, когда тег переключает пользователь, а не когда ваш код задаёт selected.
href: весь тег — ссылка с подчёркнутой подписью. Используйте там, где теги обычно ссылки, например «все записи с этим тегом», но не для основной навигации. target="_blank" добавляет rel="noreferrer noopener".

Цвета

Red

Orange

Green

Indigo

Gray

<tk-tag color="red">Red</tk-tag>
<tk-tag color="orange">Orange</tk-tag>
<tk-tag color="green">Green</tk-tag>
<tk-tag color="indigo">Indigo</tk-tag>
<tk-tag>Gray</tk-tag>

color принимает 13 названий: red, orange, yellow, green, mint, teal, cyan, blue, indigo, purple, pink, brown и gray (по умолчанию).

Один цвет на категорию, одинаковый везде, где она встречается.
Соседним категориям — разные цвета.
gray — для людей и для подписей без категории.

Цвета для подписей, которые создают пользователи

Чтобы раскрасить теги, которые вводят люди, получайте цвет из хеша подписи по 12 цветам кроме серого. Одна и та же подпись всегда получает один цвет; у двух подписей цвет может совпасть. Введённые подписи перед хешированием обрежьте по краям и приведите к нижнему регистру.

const CHROMATIC = ['red', 'orange', 'yellow', 'green', 'mint', 'teal',
  'cyan', 'blue', 'indigo', 'purple', 'pink', 'brown'];

function tagColor(label) {
  let h = 5381;
  for (const ch of label) h = ((h * 33) ^ ch.codePointAt(0)) >>> 0;
  return CHROMATIC[h % 12];
}

Иконка или аватар в начале

Featured

Mira Petrova

<tk-tag color="green"><tk-icon slot="leading" name="star"></tk-icon>Featured</tk-tag>
<tk-tag removable><tk-avatar slot="leading" shape="circle" size="20" name="Mira Petrova"></tk-avatar>Mira Petrova</tk-tag>

Иконка рисуется размером 16px цветом тега.
Человек — tk-avatar размера 20 в leading и имя в подписи. Действует правило формы аватара: круг для людей, квадрат для команд и организаций.
Имя пишите всегда. Точку присутствия не добавляйте: ей нет места.
Теги людей оставляйте gray, если цвет не обозначает категорию.

Длинные подписи и группы

Подпись не переносится. Ограничьте ширину тега, и подпись закончится многоточием; ✕ или ✓ останется. Скринридер всё равно прочитает подпись целиком.
Держите подписи короче 20 символов. Полный текст показывайте в Tooltip.
Теги идут и переносятся, как слова. В одной группе — один вид тегов.
Тегов слишком много? Покажите первые несколько и добавьте тег «+N» с именем «N more tags». Группу вы собираете сами.

Когда использовать

Тег — для категории: ключевое слово на карточке, категория в ячейке таблицы, фильтр на панели, получатель в диалоге «Поделиться».
Для статуса или числа берите Badge. Красный тег — это категория, а не ошибка.
Для одного выбора в форме берите Radio group, а для переключения вида — Segmented control.
Для действия берите Button или Menu. Кликабельный тег — это ссылка.

Текст

1–3 слова, заглавная буква только в начале, без точки в конце.
Смысл — в словах. Цвет лишь помогает различать теги.

Можно / нельзя

✅ Можно	❌ Нельзя
Разные цвета для соседних категорий	Один цвет для разных категорий рядом
Один цвет на категорию везде	Перекрашивать тот же тег в другом виде
Одна задача на тег	Тег, который и удаляется, и ведёт по ссылке
Badge для статусов и чисел	Статус в виде цветного тега
✕ с именем по подписи: «Remove Bug»	«Clear filter» на каждой ✕
Имя рядом с аватаром в теге человека	Человек, показанный одним аватаром
Один вид тегов в группе	Выбираемые и удаляемые теги в одном ряду
Длинная подпись с многоточием и Tooltip	Тег, перенесённый на две строки

Badge: статусы и числа; никогда не интерактивен.
Avatar: лицо в теге человека.
Tooltip: полный текст обрезанного тега.
Multiselect: выбирает несколько вариантов и показывает их тегами.

API

Атрибуты

Атрибут	Тип	По умолчанию	Что делает
`color`	одно из 13 названий цветов	`gray`	цвет категории
`removable`	boolean	`false`	добавляет кнопку ✕; важнее `selectable` и `href`
`remove-label`	string	`Remove {label}`	имя кнопки ✕
`selectable`	boolean	`false`	делает тег переключателем; важнее `href`
`selected`	boolean	`false`	состояние переключателя
`href`	string		делает тег ссылкой
`target`	string		цель ссылки; `_blank` добавляет `rel="noreferrer noopener"`

Слоты

Слот	Содержимое
по умолчанию	подпись
`leading`	`tk-icon` или `tk-avatar` размера 20

События

Событие	Когда
`tk-remove`	нажата ✕; не отменяемое. Удалите тег в обработчике
`change`	пользователь переключил выбираемый тег; читайте `selected`

tk-tag.focus() переводит фокус на кнопку или ссылку тега.

Токены

Элемент	Токены
заливка	`categorical/{color}/surface`
подпись, иконка, ✕, + и ✓	`categorical/{color}/text`
рамка интерактивных видов	`categorical/{color}/border`
форма	`radius-full`
шрифт подписи	`font-size-xs`, `font-weight-medium`, `letter-spacing-caption`
иконки	`icon-size-16` в начале, `icon-size-12` для ✕, + и ✓
отступы	`space-4`, `space-8`
рамка фокуса	`border/accent/focus`

Значения по темам: Color.

Доступность

Встроено:

Кнопка ✕ называется «Remove {label}» по подписи.
Выбираемый тег — кнопка-переключатель с aria-pressed. Кликабельный тег — ссылка с именем из подписи.
Каждый интерактивный тег — одна остановка Tab. Статичный пропускается.
Иконка или аватар в начале скрыты от скринридеров.
Контраст подписи не ниже 4.5:1 во всех темах, в том числе при наведении и нажатии.

На вашей стороне:

После удаления тега переведите фокус на предыдущий тег, а если тегов не осталось — на поле или заголовок, к которым относится группа:
```
group.addEventListener('tk-remove', (e) => {
  const tag = e.target;
  const prev = tag.previousElementSibling;
  tag.remove();
  (prev ?? group.querySelector('tk-tag') ?? anchor).focus();
});
```
Задайте remove-label, если одной подписи мало: «Удалить фильтр: статус открыт».
Переводите remove-label на другие языки.

Клавиша	Действие
`Tab`	переходит к следующей ✕, переключателю или ссылке
`Enter` / `Space`	удаляет, переключает или открывает; ссылка открывается по `Enter`

Пределы контраста

Цветная рамка интерактивных тегов в светлой теме ниже 3:1, поэтому интерактивность показывает не она, а значки ✕, + и ✓ и подчёркивание ссылки.

Анатомия

Виды

Цвета

Цвета для подписей, которые создают пользователи

Иконка или аватар в начале

Длинные подписи и группы

Когда использовать

Текст

Можно / нельзя

Связанные

API

Атрибуты

Слоты

События

Токены

Доступность

Пределы контраста