Tag
Компонент Tag используется для отображения категорий, фильтров, ключевых слов и других интерактивных меток. По умолчанию отображается как ссылка (<a>) с поддержкой состояний наведения и фокуса.
Обзор
- Основное назначение: интерактивные метки для категорий, тегов, фильтров.
- Ключевые возможности:
- Три варианта оформления:
filled,outlined,soft. - Цветовая палитра с тёмной темой.
- Состояния:
hover,focus,active,disabled. - Эффект свечения (
isGlow). - Нестилизованный режим (
unstyled). - Возможность заменить корневой тег через
component. - Проброс всех атрибутов.
- Три варианта оформления:
API компонента
Props
| Проп | Тип | По умолчанию | Описание |
|---|---|---|---|
color | String | 'neutral' | Цветовая тема тега. Возможные значения: 'primary', 'secondary', 'info', 'success', 'warning', 'error', 'neutral'. |
variant | String | 'filled' | Вариант оформления. Возможные значения: 'filled', 'outlined', 'soft'. |
component | String | Object | 'a' | Позволяет заменить корневой HTML-тег или передать компонент. |
isGlow | Boolean | false | Добавляет эффект тени-свечения в цвет темы. |
unstyled | Boolean | false | Если true, убирает все стили по умолчанию, оставляя только базовые и переданный className. |
className | String | Дополнительные CSS-классы. |
Слоты
| Имя слота | Описание |
|---|---|
default | Содержимое тега (текст, иконка, счётчик и т.д.). |