Status

Status conveys the state of an item or object in a visual manner.

Examples

Success
Failed
Warning
Information
Running
Waiting
Queued
Canceled
Skipped

Contents

UsageAPIs

Usage

Show the status of something without spelling it out by using a status.

Attach an optional, more descriptive message to the icon if there's more to say. Don't say "success" or "failure"; the icon says enough.

APIs

IStatusProps

animated
boolean
Animate the icon (if supported). Defaults to true for Running.
ariaLabel
string
If provided, will set aria label of the Status component when text is not specified.
className
string
Optional classname to add to the Status component.
colorrequired
string
Used to identify the fill color for the Status svg.
onRenderIconrequired
(className: string, size: StatusSize, animated?: boolean, ariaLabel?: string) => JSX.Element
Renders an icon of the provided size with the provided className, and an optional aria label.
size
StatusSize
Size of the component.
text
string
If provided, will turn the component into an extended status pill with this text.
tooltipContent
(() => React.ReactNode) | undefined
If provided, will be displayed on pill hover.

StatusSize

s"12"
string
m"16"
string
l"24"
string
xl"32"
string