ValyroUI English version

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';

Пропсы

PropTypeDefault
colorBadgeColor'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.
iconReactNodeIcon before the label.
dotbooleanfalseLeading 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 · Весь раздел «Базовые элементы»