Paste assistant Assistant
Figma
Star454

Status Badge

Version 2.1.1GithubStorybookPeer review pending

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

SuccessErrorWarningNeutralIn-progressDisabledDraft
AvailableUnavailableBusyNeutralOffline
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>

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

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.

Success
Component preview theme
<StatusBadge variant="ProcessSuccess">
Success
</StatusBadge>
Error
Component preview theme
<StatusBadge variant="ProcessError">
Error
</StatusBadge>
Warning
Component preview theme
<StatusBadge variant="ProcessWarning">
Warning
</StatusBadge>
Neutral
Component preview theme
<StatusBadge variant="ProcessNeutral">
Neutral
</StatusBadge>
In-progress
Component preview theme
<StatusBadge variant="ProcessInProgress">
In-progress
</StatusBadge>
Disabled
Component preview theme
<StatusBadge variant="ProcessDisabled">
Disabled
</StatusBadge>
Draft
Component preview theme
<StatusBadge variant="ProcessDraft">
Draft
</StatusBadge>
Available
Component preview theme
<StatusBadge variant="ConnectivityAvailable">
Available
</StatusBadge>
Unavailable
Component preview theme
<StatusBadge variant="ConnectivityUnavailable">
Unavailable
</StatusBadge>
Busy
Component preview theme
<StatusBadge variant="ConnectivityBusy">
Busy
</StatusBadge>
Neutral
Component preview theme
<StatusBadge variant="ConnectivityNeutral">
Neutral
</StatusBadge>
Offline
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.

SuccessErrorWarningNeutralIn-progressDisabledDraft
AvailableUnavailableBusyNeutralOffline
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.

To help us improve this site, we use tools that set cookies. The data gathered by these tools is anonymized. If you reject the use of cookies, no analytics service will be initiated.