Badge

Choose color by meaning and theme by visual emphasis. The badge itself is not an action. Sizes are xs, s, and m; colors include warning.

Live example

Badge

Example controls

TextchildrenSizesizeThemethemeColorcolorLeft iconleftIconRight iconrightIcon

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

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

Prop	Type / variants	Purpose	Default
`children`	`string`	Component content.	—
`size`	`'xs' \| 's' \| 'm'`xs · s · m	Component size.	`m`
`theme`	`'filled' \| 'light' \| 'border'`filled · light · border	Badge appearance.	`filled`
`color`	`'primary' \| 'secondary' \| 'success' \| 'danger' \| 'warning'`primary · secondary · success · danger · warning	Semantic color.	`primary`
`leftIcon`	`SvgType`none · check · search · user	Icon before the text; accepts an SVG component.	—
`rightIcon`	`SvgType`none · check · search · user	Icon after the text; accepts an SVG component.	—
`leftIconClassName`	`string`	Class of the left icon.	—
`rightIconClassName`	`string`	Class of the right icon.	—
`className`	`string`	Class of the root element.	—
`textClassName`	`string`	Class of the text part.	—

Native HTML attributes are accepted where the component renders the corresponding element. className props only affect styling.