Chip
Компактная метка фильтра/выбора с опциональным счётчиком и удалением. Внешний вид v1 — нейтральный grey calm; appearance/variant в API нет.
Использование
Размеры
Состояния
Доступность
Корень — span. При onClick основное действие — нативная button с aria-pressed, Enter/Space. Кнопка удаления — соседний элемент, а не её потомок. Без onClick selected только визуальный (data-selected). Close — ActionButton с closeLabel или строковыми children. Клик по close не всплывает. Удаление снаружи через onClose; Chip сам не размонтируется.
API
| Проп | Тип | По умолчанию | Описание |
|---|---|---|---|
children | ReactNode | — | Visible label. Prefer text; noninteractive inline content is allowed. |
start | ReactNode | — | Leading decorative icon or content. Inherits the chip color. |
count | number | — | Numeric counter rendered via Badge. Presence shows the badge. Zero is kept; values above 99 display 99+; nonfinite values hide the badge. |
size | "base" | "large" | base | Compact control size. |
disabled | boolean | | Noninteractive visual and disables the close control. |
selected | boolean | | Persistent selected look (bg-grey-calm-active). Sets aria-pressed. |
closable | boolean | | Shows the remove ActionButton. Does not unmount the chip. |
closeLabel | string | — | Accessible name for the close button. Defaults to `Удалить ${children}` when children is a string/number, else `Удалить`. |
onClose | () => void | — | Fired on close click; removal is controlled by the consumer. |
Last updated on