Skip to contentSkip to navigationSkip to topbar
Paste
Paste assistant Assistant
FigmaStar

Status Badge

Version 2.2.0GithubStorybookPeer 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

About Status Badge

About Status Badge page anchor

Status badge is an implementation of the Object 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.

Examples

Examples page anchor

Variants

Variants page anchor

ProcessSuccess

ProcessSuccess page anchor
Component preview theme
<StatusBadge variant="ProcessSuccess">

  Success

</StatusBadge>

ProcessError

ProcessError page anchor
Component preview theme
<StatusBadge variant="ProcessError">

  Error

</StatusBadge>

ProcessWarning

ProcessWarning page anchor
Component preview theme
<StatusBadge variant="ProcessWarning">

  Warning

</StatusBadge>

ProcessNeutral

ProcessNeutral page anchor
Component preview theme
<StatusBadge variant="ProcessNeutral">

  Neutral

</StatusBadge>

ProcessInProgress

ProcessInProgress page anchor
Component preview theme
<StatusBadge variant="ProcessInProgress">

  In-progress

</StatusBadge>

ProcessDisabled

ProcessDisabled page anchor
Component preview theme
<StatusBadge variant="ProcessDisabled">

  Disabled

</StatusBadge>

ProcessDraft

ProcessDraft page anchor
Component preview theme
<StatusBadge variant="ProcessDraft">

  Draft

</StatusBadge>

ConnectivityAvailable

ConnectivityAvailable page anchor
Component preview theme
<StatusBadge variant="ConnectivityAvailable">

  Available

</StatusBadge>

ConnectivityUnavailable

ConnectivityUnavailable page anchor
Component preview theme
<StatusBadge variant="ConnectivityUnavailable">

  Unavailable

</StatusBadge>

ConnectivityBusy

ConnectivityBusy page anchor
Component preview theme
<StatusBadge variant="ConnectivityBusy">

  Busy

</StatusBadge>

ConnectivityNeutral

ConnectivityNeutral page anchor
Component preview theme
<StatusBadge variant="ConnectivityNeutral">

  Neutral

</StatusBadge>

ConnectivityOffline

ConnectivityOffline page anchor
Component preview theme
<StatusBadge variant="ConnectivityOffline">

  Offline

</StatusBadge>

Small Badges

Small Badges page anchor

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>

Borderless Badges

Borderless Badges page anchor

A borderless Status Badge has no border, padding, or background color.

Use a borderless Status Badge inside of a Table to indicate the current state or condition of items of the Table. Placement of the status in the Table should depend on the importance of the status to the given user flow and should be tested with users.

Component preview theme
<Box display="flex" flexDirection="column" rowGap="space40">

  <Box display="flex" columnGap="space40" rowGap="space40" flexWrap="wrap">

    <StatusBadge size="borderless" variant="ProcessSuccess">

      Success

    </StatusBadge>

    <StatusBadge size="borderless" variant="ProcessError">

      Error

    </StatusBadge>

    <StatusBadge size="borderless" variant="ProcessWarning">

      Warning

    </StatusBadge>

    <StatusBadge size="borderless" variant="ProcessNeutral">

      Neutral

    </StatusBadge>

    <StatusBadge size="borderless" variant="ProcessInProgress">

      In-progress

    </StatusBadge>

    <StatusBadge size="borderless" variant="ProcessDisabled">

      Disabled

    </StatusBadge>

    <StatusBadge size="borderless" variant="ProcessDraft">

      Draft

    </StatusBadge>

  </Box>

  <Box display="flex" columnGap="space40">

    <StatusBadge size="borderless" variant="ConnectivityAvailable">

      Available

    </StatusBadge>

    <StatusBadge size="borderless" variant="ConnectivityUnavailable">

      Unavailable

    </StatusBadge>

    <StatusBadge size="borderless" variant="ConnectivityBusy">

      Busy

    </StatusBadge>

    <StatusBadge size="borderless" variant="ConnectivityNeutral">

      Neutral

    </StatusBadge>

    <StatusBadge size="borderless" variant="ConnectivityOffline">

      Offline

    </StatusBadge>

  </Box>

</Box>

Composition Notes

Composition Notes page anchor

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.