Badge

Небольшая текстовая метка статуса или категории.

Выберите color по смыслу и theme по визуальному весу. Метка сама не является действием. Размеры — xs, s и m; среди цветов есть warning.

Живой пример

Badge

Настройки примера

ТекстchildrenРазмерsizeВариантthemeЦветcolorИконка слеваleftIconИконка справаrightIcon

import { Badge } from '@prosazhin/pbcomponents';

<Badge
  color='success'
  theme='light'
>
  Ready
</Badge>;

Prop	Тип / варианты	Назначение	По умолчанию
`children`	`string`	Содержимое компонента.	—
`size`	`'xs' \| 's' \| 'm'`xs · s · m	Размер компонента.	`m`
`theme`	`'filled' \| 'light' \| 'border'`filled · light · border	Оформление бейджа.	`filled`
`color`	`'primary' \| 'secondary' \| 'success' \| 'danger' \| 'warning'`primary · secondary · success · danger · warning	Смысловой цвет.	`primary`
`leftIcon`	`SvgType`none · check · search · user	Иконка перед текстом; принимает SVG-компонент.	—
`rightIcon`	`SvgType`none · check · search · user	Иконка после текста; принимает SVG-компонент.	—
`leftIconClassName`	`string`	Класс левой иконки.	—
`rightIconClassName`	`string`	Класс правой иконки.	—
`className`	`string`	Класс корневого элемента.	—
`textClassName`	`string`	Класс текстовой части.	—

Нативные HTML-атрибуты поддерживаются там, где компонент рендерит соответствующий элемент. Параметры className управляют только оформлением.