StatusDot

Colored status indicator dot.

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

#Playground

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

Loading preview…

<StatusDot status="success" />

<StatusDot status="warning" />

Prop	Type	Default	Description
`status`	`'default' \| 'success' \| 'warning' \| 'danger' \| 'info'`	`'default'`	Status variant controlling color.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Size of the dot.
`pulse`	`boolean`	`false`	Enable pulse animation (for "active/running" state).
`label`	`string`	—	Optional label text shown next to dot.
`'aria-label'`	`string`	—	Accessible label for screen readers.
`class`	`string`	—	Additional CSS class for root element.
`style`	`JSX.CSSProperties`	—	Inline styles for root element.
`unstyled`	`boolean`	`false`	Remove all default styles, only apply classNames.

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