Primitive / Atomstable

StatusDot

Colored status indicator with optional label and pulse state.

@glinui/uiComponent: status-dot

Installation$

Install from the package for shared ownership or from the registry for copy-paste control.

Package Manager$

pnpm add @glinui/ui @glinui/tokens

Registry$

pnpm dlx @glinui/cli@latest add status-dot

Usage$

StatusDot renders a colored circular indicator alongside an optional text label. Use it in list rows, dashboards, or nav items to communicate service health, user presence, or process state at a glance. The dot itself is aria-hidden; the label provides accessible context.

Basic Statuses$

IdleSyncingOperationalDegradedOutage

TSX

1import { StatusDot } from "@glinui/ui"
2
3export function StatusDotBasicDemo() {
4return (
5  <div className="flex flex-col gap-2">
6    <StatusDot status="neutral" label="Idle" />
7    <StatusDot status="info" label="Syncing" />
8    <StatusDot status="success" label="Operational" />
9    <StatusDot status="warning" label="Degraded" />
10    <StatusDot status="danger" label="Outage" />
11  </div>
12)
13}

Examples$

Pulse$

Enable pulse to add a motion-safe:animate-pulse animation to the dot. Useful for active or live states.

LiveCritical

TSX

1import { StatusDot } from "@glinui/ui"
2
3export function StatusDotPulseDemo() {
4return (
5  <div className="flex flex-col gap-2">
6    <StatusDot status="success" label="Live" pulse />
7    <StatusDot status="danger" label="Critical" pulse />
8  </div>
9)
10}

Sizes$

SmallMediumLarge

TSX

1import { StatusDot } from "@glinui/ui"
2
3export function StatusDotSizeDemo() {
4return (
5  <div className="flex flex-col gap-2">
6    <StatusDot status="success" size="sm" label="Small" />
7    <StatusDot status="success" size="md" label="Medium" />
8    <StatusDot status="success" size="lg" label="Large" />
9  </div>
10)
11}

Dot Only$

Omit the label prop to render a standalone colored dot — useful in compact table cells or avatar badges.

TSX

1import { StatusDot } from "@glinui/ui"
2
3export function StatusDotOnlyDemo() {
4return (
5  <div className="flex items-center gap-3">
6    <StatusDot status="neutral" />
7    <StatusDot status="info" />
8    <StatusDot status="success" />
9    <StatusDot status="warning" />
10    <StatusDot status="danger" />
11  </div>
12)
13}

With Children$

Pass children instead of the label prop when you need richer label content. The label prop takes priority if both are provided.

Syncing — 3 items remaining

TSX

1import { StatusDot } from "@glinui/ui"
2
3export function StatusDotChildrenDemo() {
4return (
5  <StatusDot status="info">
6    <span className="font-medium">Syncing</span>{" "}
7    <span className="text-neutral-400">— 3 items remaining</span>
8  </StatusDot>
9)
10}

Accessibility$

The dot <span> is aria-hidden="true" — color alone does not convey meaning to assistive technologies.
Always supply a label or children describing the status in plain text.
When using StatusDot inside a live region (e.g. a dashboard that polls for updates), wrap it in role="status" with aria-live="polite".

Reduced Motion$

The pulse animation uses motion-safe:animate-pulse. Under prefers-reduced-motion: reduce, the dot renders as a static colored circle with no animation.

API Reference$

Prop	Type	Required	Default	Description
`label`	`string`	No	`-`	Auto-generated from TypeScript source.
`pulse`	`"true" \| "false"`	No	`false`	Variant option from dotVariants.
`size`	`"sm" \| "md" \| "lg"`	No	`"md"`	Variant option from statusDotVariants.
`status`	`"neutral" \| "info" \| "success" \| "warning" \| "danger"`	No	`"neutral"`	Variant option from dotVariants.

Source$

TSX

1import { StatusDot } from "@glinui/ui"

packages/ui/src/components/status-dot.tsx

Generated API Snapshot

Beta

Auto-extracted from TypeScript source in packages/ui/src/components/status-dot.tsx. This section is in beta and may lag behind hand-curated docs. Regenerate with pnpm --filter @glinui/docs api:generate.

Generated: 2026-02-19T17:59:28.468Z · Full index: /docs/api-metadata

Primary Props Type

StatusDotProps

`StatusDotProps`

Prop	Type	Required	Default	Description
`label`	`string`	No	`-`	-
`pulse`	`"true" \| "false"`	No	`false`	Variant option from dotVariants.
`size`	`"sm" \| "md" \| "lg"`	No	`"md"`	Variant option from statusDotVariants.
`status`	`"neutral" \| "info" \| "success" \| "warning" \| "danger"`	No	`"neutral"`	Variant option from dotVariants.