Badge
Статусы и метки. Бесплатно, MIT · Базовые элементы › Метки и подсказки
Установка
npx valyro-cli@latest add badge
npx shadcn@latest add https://valyro.xyz/r/badge.json
npm install valyro-ui
import 'valyro-ui/styles.css';
import { Badge } from 'valyro-ui';
Пропсы
| Prop | Type | Default | |
|---|---|---|---|
color | BadgeColor | 'gray' | Hue of the fill, text and dot; inverted uses the page foreground as the fill in every variant. |
variant | 'subtle' | 'solid' | 'outline' | 'subtle' | subtle tinted fill, solid saturated fill with contrasting text, outline transparent with a tinted border. |
size | 'sm' | 'md' | 'lg' | 'md' | Badge height, padding and text size. |
icon | ReactNode | Icon before the label. | |
dot | boolean | false | Leading status dot in the badge color. |
Похожие компоненты
- Avatar — Аватары пользователей
- Tooltip — Всплывающие подсказки
- Separator — Разделители
- Button — Кнопки всех типов
- Icon Button — Кнопка с иконкой
- Button Group — Группы кнопок
- Copy to Clipboard — Копирование с подтверждением
- Skeleton — Заглушки загрузки
- Spinner — Индикатор загрузки
- Progress Bar — Полосы прогресса
Назад: Copy to Clipboard · Далее: Avatar · Весь раздел «Базовые элементы»