Skip to contentSkip to navigationSkip to topbar
Figma
Star

Status Badge

Version 2.1.1GithubStorybookPeer review pending

A Status Badge communicates the status of a process or connectivity to an application or service.

Component preview theme
<Box display="flex" flexDirection="column" rowGap="space40">
<Box display="flex" columnGap="space40" rowGap="space40" flexWrap="wrap">
<StatusBadge variant="ProcessSuccess">
Success
</StatusBadge>
<StatusBadge variant="ProcessError">
Error
</StatusBadge>
<StatusBadge variant="ProcessWarning">
Warning
</StatusBadge>
<StatusBadge variant="ProcessNeutral">
Neutral
</StatusBadge>
<StatusBadge variant="ProcessInProgress">
In-progress
</StatusBadge>
<StatusBadge variant="ProcessDisabled">
Disabled
</StatusBadge>
<StatusBadge variant="ProcessDraft">
Draft
</StatusBadge>
</Box>
<Box display="flex" columnGap="space40">
<StatusBadge variant="ConnectivityAvailable">
Available
</StatusBadge>
<StatusBadge variant="ConnectivityUnavailable">
Unavailable
</StatusBadge>
<StatusBadge variant="ConnectivityBusy">
Busy
</StatusBadge>
<StatusBadge variant="ConnectivityNeutral">
Neutral
</StatusBadge>
<StatusBadge variant="ConnectivityOffline">
Offline
</StatusBadge>
</Box>
</Box>

Guidelines

Guidelines page anchor

Status badge is an implementation of the Status Pattern to display the status of a process or connectivity in your product.

Accessibility

Accessibility page anchor

Status Badge communicates a status in an accessible way by automatically pairing an icon with a color that represents a specific status type. This ensures there are distinct visual differences between each status type.

Care must still be taken to ensure the word used to describe the status in the badge is unique to the status type it is paired with for any given screen.

ProcessSuccess

ProcessSuccess page anchor
Component preview theme
<StatusBadge variant="ProcessSuccess">
Success
</StatusBadge>
Component preview theme
<StatusBadge variant="ProcessError">
Error
</StatusBadge>
Component preview theme
<StatusBadge variant="ProcessWarning">
Warning
</StatusBadge>
Component preview theme
<StatusBadge variant="ProcessNeutral">
Neutral
</StatusBadge>
Component preview theme
<StatusBadge variant="ProcessInProgress">
In-progress
</StatusBadge>
Component preview theme
<StatusBadge variant="ProcessDisabled">
Disabled
</StatusBadge>
Component preview theme
<StatusBadge variant="ProcessDraft">
Draft
</StatusBadge>
Component preview theme
<StatusBadge variant="ConnectivityAvailable">
Available
</StatusBadge>
Component preview theme
<StatusBadge variant="ConnectivityUnavailable">
Unavailable
</StatusBadge>
Component preview theme
<StatusBadge variant="ConnectivityBusy">
Busy
</StatusBadge>
Component preview theme
<StatusBadge variant="ConnectivityNeutral">
Neutral
</StatusBadge>
Component preview theme
<StatusBadge variant="ConnectivityOffline">
Offline
</StatusBadge>

Use small Badges sparingly, only when needed for vertical density. Guidelines for using variants in small Badge are the same as in their default size.

Component preview theme
<Box display="flex" flexDirection="column" rowGap="space40">
<Box display="flex" columnGap="space40" rowGap="space40" flexWrap="wrap">
<StatusBadge size="small" variant="ProcessSuccess">
Success
</StatusBadge>
<StatusBadge size="small" variant="ProcessError">
Error
</StatusBadge>
<StatusBadge size="small" variant="ProcessWarning">
Warning
</StatusBadge>
<StatusBadge size="small" variant="ProcessNeutral">
Neutral
</StatusBadge>
<StatusBadge size="small" variant="ProcessInProgress">
In-progress
</StatusBadge>
<StatusBadge size="small" variant="ProcessDisabled">
Disabled
</StatusBadge>
<StatusBadge size="small" variant="ProcessDraft">
Draft
</StatusBadge>
</Box>
<Box display="flex" columnGap="space40">
<StatusBadge size="small" variant="ConnectivityAvailable">
Available
</StatusBadge>
<StatusBadge size="small" variant="ConnectivityUnavailable">
Unavailable
</StatusBadge>
<StatusBadge size="small" variant="ConnectivityBusy">
Busy
</StatusBadge>
<StatusBadge size="small" variant="ConnectivityNeutral">
Neutral
</StatusBadge>
<StatusBadge size="small" variant="ConnectivityOffline">
Offline
</StatusBadge>
</Box>
</Box>

Use a Status Badge when you want to add a label to a piece of UI for quick identification and navigation.

Status Badge labels should be 1–3 words.