Status Badge - Components - Paste: The Design System for building Twilio customer experiences

<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

About Status Badge

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

Accessibility

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

Variants

ProcessSuccess

ProcessError

ProcessWarning

ProcessNeutral

ProcessInProgress

ProcessDisabled

ProcessDraft

ConnectivityAvailable

ConnectivityUnavailable

<StatusBadge variant="ConnectivityUnavailable">
  Unavailable
</StatusBadge>

ConnectivityBusy

ConnectivityNeutral

ConnectivityOffline

Small Badges

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.

<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>

Composition Notes

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.