Chip

Компактный элемент, который обозначает атрибут, категорию или действие. Используется для маркировки, фильтрации или организации элементов.

Установка

npx @zizigy/capsule add Chip

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

Базовая Chip

<capsule-chip>Базовая Chip</capsule-chip>

Варианты

<capsule-chip variant="outline">Outline</capsule-chip>
<capsule-chip variant="ghost">Ghost</capsule-chip>

Размеры

<capsule-chip size="sm">Маленькая</capsule-chip>
<capsule-chip>По умолчанию</capsule-chip>
<capsule-chip size="lg">Большая</capsule-chip>

Цвет (color)

<capsule-chip color="primary">primary</capsule-chip>
<capsule-chip color="success">success</capsule-chip>
<capsule-chip color="danger">danger</capsule-chip>
<capsule-chip color="warning">warning</capsule-chip>

Атрибуты

Атрибут	Тип	По умолчанию	Описание
variant	string	-	Вариант стиля Chip
size	string	-	Размер Chip
type	string	-	Атрибут type
color	string	-	Цвет Chip (например: 'primary', 'success', 'danger', HEX, RGB и др.)

Значения variant

• outline — цветной контур
• ghost — без фона

Значения size

• sm — маленькая
• lg — большая

Доступность

• ✅ Поддержка работы с клавиатурой
• ✅ ARIA атрибуты для screen readers