Status

View source on GitHub
; Opens a new tab
See recent changes on GitHub
; Opens a new tab

Status is a graphic indicator of an element’s state.

also known as Status Indicator, Signal, System Feedback

Figma:
Ready
Web:
Ready
iOS:
N/A
Android:
N/A
A11y:
Ready

Props

Component props
Name
Type
Default
type
Required
"unstarted"
| "queued"
| "inProgress"
| "halted"
| "ok"
| "problem"
| "canceled"
| "warning"
-

The type of status to display.

accessibilityLabel
string
-

If not using title, provide an accessibility label to give the user context about the icon. Be sure to localize the label.

subtext
string
-

Additional contextual information around the status. Only for use with title. See localization to learn more.

title
string
-

A label to reinforce the meaning of the status icon. See localization to learn more.

Usage guidelines

When to use
  • To describe the status of an individual element, such an an item in a list or a row in a table.
When not to use
  • To describe surface-level errors. Use Callout instead.
  • To describe whether a numeric value is going up or down. Use Datapoint instead.

Best practices

Do

Use Status to communicate a step in a workflow or the state of an item.

Don't

Use SVGs or images that resemble the Status’ symbols to denote status.

Do

Place Status close to its subject to provide context and reference. It can be placed as an inline element or paired side by side as needed.

Don't

Place Status far away from its subject.

Do

Use title when the status it represents is unique, specific and critical for the user to know.

Don't

Use Status' subText to display extraneous messaging.

Accessibility

Icons are a great way to help users who have difficulties with reading, focus attention, and low vision impairments. For such use cases, Status can be used without accompanying title text.

ARIA attributes

If Status appears without title text, accessibilityLabel should be used to provide a text description for screen readers to announce and communicate the represented icon, as shown in the first example.

Avoid using the generic words like "image" or "icon"; instead, use verbs that describe the meaning of the icon, for example: "Upload in progress".

If using title to describe what the icon represents, accessibilityLabel does not need to be provided, as shown in the second example.

Localization

Be sure to localize the title, subtext and accessibilityLabel props. Note that localization can lengthen text by 20 to 30 percent.

Variants

Text additions

Status name
Status subtext

Component quality checklist

Component quality checklist
Quality item
Status
Status description
Figma Library
Ready
Component is available in Figma across all platforms.
Responsive Web
Ready
Component is available in code for web and mobile web.
iOS
Component is not currently available in code for iOS.
Android
Component is not currently available in code for Android.

Icon
Icon should be used to display a symbol that does not represent the state or status of an item.

Badge
Use Badge to label or mark an item with a designation or category.

Callout
Use Callout to communicate page-level status, such as an error, and to provide actionable next steps.

Edit page on GitHub
; Opens a new tab