Chip
Компактна позначка статусу з шістьма смисловими тонами.
Тони
API
Props
| Назва | Тип | Типово | Опис |
|---|---|---|---|
tone | neutralaccentsuccesswarningdangerinfo | "neutral" | Смисловий колір. Кожен тон бере трійку токенів: текст / фон / межа. |
size | xssm | "xs" | Висота чипа: `xs` — щільні таблиці й списки, `sm` — фільтри й теги поруч із полями. На дотику клікабельний чип і хрестик добирають невидиму зону влучання — сама висота від цього не росте. |
label | string | — | Доступна назва. Потрібна, коли чип показує лише крапку чи іконку. Заміняє видимий текст для скрінрідера, як `aria-label`. |
title | string | — | Значення нативного `title`. Довгий текст обрізається трикрапкою по ширині батька — тоді `title` показує його повністю. |
clickable | boolean | — | Робить чип інтерактивним: рендериться як `button`, отримує роль і стає доступним із клавіатури. |
dot | boolean | — | Кольорова крапка замість іконки — компактний індикатор статусу. |
removable | boolean | — | Хрестик видалення праворуч. Сам чип не зникає — лише повідомляє `remove`; список тримає батько (обрані фільтри, теги запису). |
Події
| Назва | Payload | Опис |
|---|---|---|
click | [event: MouseEvent] | Клік. Спрацьовує лише коли задано `clickable`. |
remove | [] | Натиснуто хрестик `removable` (або Delete на клікабельному чипі). Список тримає батько. |
Слоти
| Назва | Опис |
|---|---|
default | Текст чипа. |
icon | Іконка перед текстом. Ігнорується, якщо задано `dot`. |
Коли використовувати
Для стану сутності в списку чи таблиці: статус публікації, роль, тег.
Коли НЕ використовувати
Не передавайте статус лише кольором. Тон — підсилення, а не носій сенсу:
dot без тексту потребує label, інакше стан недоступний для скрінрідера
й невидимий для дальтоніка.
Довгий текст не розпирає батька: чип не ширший за контейнер, а текст
обрізається трикрапкою. Задайте тоді title з повним текстом.
Доступність
Семантичний тег обирається за інтерактивністю, а не за виглядом:
clickable перетворює чип на <button>. <div @click> недоступний із
клавіатури й не має ролі.
label — доступна назва, що ЗАМІНЯЄ видимий текст для скрінрідера. У
клікабельного чипа це aria-label кнопки; у звичайного — прихований
текст, бо aria-label на <span> без ролі заборонений, і NVDA чи JAWS
його просто не читають. Тож не передавайте в label сирий код
(published) поруч із видимим «опубліковано» — саме код і прозвучить.
Хрестик і клікабельний чип мають на дотику невидиму зону 45px завширшки. Заввишки вона 30px, а не 45: повна висота заходила б на наступний ряд чипів, і палець видаляв би сусідній фільтр. Назва хрестика — «Видалити» й поточний текст чипа, і вона стежить за ним.