メインコンテンツまでスキップ

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​

StorybookでDefaultを開く

Outline​

StorybookでOutlineを開く

Half​

StorybookでHalfを開く

With Label​

StorybookでWith Labelを開く

All Variants​

StorybookでAll Variantsを開く

See Also​