Component

Status Indicator

Dot + label: never relies on color alone.

Basic

OnlineAwayOffline

Each StatusTone pairs a color with a required label, so status is never color-only.

FulfilledPendingRefundedProcessingDraft

Prop	Type	Default	Description
label	React.ReactNode	None	Text beside the dot. Without it the dot needs its own accessible name.
pulse	boolean	false	Adds a soft pulse ring - use sparingly, e.g. for "live" states.
variant	StatusTone	"default"	The state being reported; sets the dot's colour.

labelNone

React.ReactNode

Text beside the dot. Without it the dot needs its own accessible name.

pulsefalse

boolean

Adds a soft pulse ring - use sparingly, e.g. for "live" states.

variant"default"

StatusTone

The state being reported; sets the dot's colour.

Also accepts everything from React.HTMLAttributes<HTMLSpanElement>.

Coding agents read this reference, with its examples, from the version your project has installed, through the Fuji UI MCP server. Set up your agent