StatusDot

stable

Colored dot indicating idle, active, pending, error, or completed state

import { StatusDot } from "@danagraph/design-system"

ActivePendingIdleErrorOffline

Loading demo…

Props

Prop	Type	Default	Description
`state`	`"active" \| "idle" \| "pending" \| "error" \| "offline"`	"idle"	Status state
`size`	`"sm" \| "md" \| "lg"`	"md"	Dot size
`animate`	`boolean`	false	Enable pulse animation
`label`	`string`	—	Custom label text (defaults to state name)
`showLabel`	`boolean`	false	Display label text alongside dot

state

Type "active" | "idle" | "pending" | "error" | "offline"Default "idle"

Status state

size

Type "sm" | "md" | "lg"Default "md"

Dot size

animate

Type booleanDefault false

Enable pulse animation

label

Type stringDefault —

Custom label text (defaults to state name)

showLabel

Type booleanDefault false

Display label text alongside dot

idleactivependingerrorcompletedsmmdsemantic motion

MobileWorks As-Is

Design Rationale

This component was designed to express:

Animated dot sequence for streaming/typing indicators

Colored label for status, trust level, or category

Was this helpful?