Passa al contenuto principale

StatusDot

Every example on this page is live, drawn by the library's Storybook, where you can also change its props and see the result.

A small circular indicator with optional label. Supports filled, outline, and half-filled variants.

Import​

import { StatusDot } from "~lib/data-display/status-dot";

Props​

NameTypeRequiredDefaultDescription
variant"filled" | "outline" | "half"No"filled"Dot fill style
size"sm" | "md" | "lg"No"md"Dot size
labelstringNoN/AText beside dot

Examples​

Default​

Apri Default in Storybook

Outline​

Apri Outline in Storybook

Half​

Apri Half in Storybook

With Label​

Apri With Label in Storybook

All Variants​

Apri All Variants in Storybook

See Also​