Badge

Status and count label with variants.

import { Badge } from '@ybouhjira/hyperkit';

#Playground

Edit the code — the preview recompiles and re-renders as you type.

Loading preview…

<Badge variant="success">Active</Badge>

<Badge variant="warning">Pending</Badge>

Prop	Type	Default	Description
`variant`	`'default' \| 'success' \| 'warning' \| 'danger' \| 'info' \| 'outline' \| 'soft'`	`'default'`	Color variant for the badge.
`size`	`'xs' \| 'sm' \| 'md' \| 'lg'`	`'md'`	Size variant. Controls height, padding, and font-size via tokens.
`type`	`'label' \| 'dot' \| 'count'`	`'label'`	Badge display type.
`count`	`number`	—	Numeric count to display when type is 'count'.
`maxCount`	`number`	`99`	Maximum count value before showing plus sign.
`children`	`JSX.Element`	—	Label content to display when type is 'label'.
`class`	`string`	—	Additional CSS class name.
`style`	`JSX.CSSProperties`	—	Inline CSS styles to apply.
`unstyled`	`boolean`	`false`	Disable default styling and apply only custom classes.

This component reads the following CSS custom properties. Override them globally or per-instance to restyle it — see the CSS Variables guide.