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