YuhuanStudioYunUIDocs
Feedback

Inline Status

A compact inline async-job status — a (spinning) icon plus a label, or a percentage while running.

A compact inline status for an async job: a status icon (spinning while in-progress) plus a label, or a percentage while running. Useful in media/generation lists, build rows, upload trackers — anywhere a row needs a tiny "pending / processing / done / failed" indicator.

For a presence dot use StatusIndicator; for an approval pill, StatusBadge.

Import

import { InlineStatus } from "@yuhuanowo/yunui";

Example

status drives the icon, color and spin. pending / processing spin; pass progress to show a percentage instead of the label while running. Labels are host-supplied (no bundled copy).

InlineStatus

Starting62%DoneFailed

Props

PropTypeDefaultDescription
classNamestring
labelReactNodeThe label for this status (host-supplied; no bundled copy).
progressnumberWhen in-progress and > 0, the percent replaces the label.
sizenumbermdIcon size in px.
status*"pending" | "processing" | "completed" | "failed"Job phase — drives the icon, color and whether it spins.

On this page