Data DisplayСпецификация компонента·версия 1.5.0·Открыть в Figma

Chip

Chip — компактный интерактивный элемент для отображения значений, фильтров или тегов с возможностью удаления. Отличается от Badge наличием интерактивности и кнопки закрытия.

1. Key Principles of Use

When to use

Use — для отображения выбранных фильтров, тегов пользователя, значений множественного выбора с возможностью удаления.

Don't use — для read-only статусных меток (используйте Badge).

2. Anatomy

СлотПропОписание
contentBeforeContentBeforeAvatar, Icon или пусто
label—Текст чипа
contentAfterContentAfter=trueИконка или значение справа
closeButtonhasClose=trueКнопка удаления (×)

3. Variants

Figma Component Sets

Имя в FigmapxT-shirt
Chip20XXS20XXS
Chip24XS24XS
Chip32S32S
Chip40M40M
Chip48L48L

View

ViewНазначение
DefaultНейтральный
SecondaryВторичный
AccentАкцентный / активный
PositiveПозитивный
WarningПредупреждение
NegativeНегативный

ContentBefore

ЗначениеОписание
EmptyБез левого контента
IconИконка
AvatarАватар пользователя

Shape

ShapeОписание
DefaultСтандартное скругление
PilledПолностью скруглённый

4. Sizes

T-shirtpxКонтекст
XXS20Встроенные в поля ввода
XS24Компактные тулбары
S32Строки таблиц
M40Фильтры, стандартный — дефолт
L48Touch-first

5. States

СостояниеFigma-пропОписание
default—Базовый вид
hover—Курсор над чипом
active—Нажатие
disabledDisabled=TrueНедоступен

7. Accessibility

АтрибутЗначениеКогда
role="option" или role="button"—В зависимости от контекста
aria-label для кнопки закрытия«Удалить [название чипа]»hasClose=true
aria-disabledtrueDisabled=True
Нашли расхождение документации и библиотеки — напишите команде.Сообщить о расхождении