Saltar al contenido principal

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​

Abrir Default en Storybook

Outline​

Abrir Outline en Storybook

Half​

Abrir Half en Storybook

With Label​

Abrir With Label en Storybook

All Variants​

Abrir All Variants en Storybook

See Also​