Skip to main content

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​

Open Default in Storybook

Outline​

Open Outline in Storybook

Half​

Open Half in Storybook

With Label​

Open With Label in Storybook

All Variants​

Open All Variants in Storybook

See Also​