StatusBadge

Semantic status with text, an optional indicator and a consistent visual variant.

Active

Installation

Run it from the root of a project already set up with zunoui init.

$ npx zunoui@latest add status-badge

What add status-badge installs alongside the component. The CLI skips any you already have in a compatible version.

1 examples · 1 component

ActivePendingFailedIn reviewDraft

A soft surface and an indicator dot per status.

Forwards props and ref to the container element; it only adds composition utilities.

Prop	Type	Default
`status` Semantic intent of the status.	`"neutral" \| "success" \| "warning" \| "info" \| "error"`	`"neutral"`
`indicator` Shows a colored dot before the text.	`boolean`	`true`

The states that apply to this component and their visual treatment.

State	Treatment
Status	neutral, success, warning, info and error with a soft surface.
With indicator	indicator adds a colored dot before the text.
Without indicator	indicator={false} leaves only text and surface.

The text communicates the status; the color and dot only reinforce it.

Composed on top of Badge: it inherits its contrast and compact typography.