Status Badge
Peer review pending
A Status component communicates the status of a process or connectivity to an application or service.
<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.
<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>
<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>
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>
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.
yarn add @twilio-paste/status - or - yarn add @twilio-paste/status
import {StatusBadge} from '@twilio-paste/core/status';
const BadgeExample = () => <StatusBadge variant="ProcessError">Process Error Badge</StatusBadge>;
| Prop | Type | Description | Default |
|---|---|---|---|
| children | NonNullable<React.ReactNode> | null | |
| variant | StatusBadgeVariants | ProcessError, ProcessWarning, ProcessSuccess, ProcessNeutral, ProcessInProgress, ProcessDisabled, ProcessDraft, AvailabilityAvailable, AvailabilityBusy, AvailabilityUnavailable, AvailabilityNeutral, AvailabilityOffline | null |
| size | BadgeSizes | default, small | default |
| element? | string | Overrides the default element name to apply unique styles with the Customization Provider | 'STATUS_BADGE' |
Changelog
733709127#3395 Thanks @SiTaggart! - Modified the compile target of our JavaScript bundles fromnodetobrowserto minimize the risk of clashing with RequireJS. This is marked as a major out of an abundance of caution. You shouldn't need to do anything but we wanted you to be aware of the change on the off chance it has unintended consequences
- Updated dependencies [
733709127]:- @twilio-paste/uid-library@2.0.0
- @twilio-paste/color-contrast-utils@5.0.0
- @twilio-paste/anchor@12.0.0
- @twilio-paste/badge@8.0.0
- @twilio-paste/button@14.0.0
- @twilio-paste/menu@14.0.0
- @twilio-paste/screen-reader-only@13.0.0
- @twilio-paste/separator@8.0.0
- @twilio-paste/spinner@14.0.0
- @twilio-paste/media-object@10.0.0
- @twilio-paste/stack@8.0.0
- @twilio-paste/box@10.0.0
- @twilio-paste/menu-primitive@2.0.0
- @twilio-paste/text@10.0.0
- @twilio-paste/customization@8.0.0
- @twilio-paste/design-tokens@10.0.0
- @twilio-paste/icons@12.0.0
- @twilio-paste/animation-library@2.0.0
- @twilio-paste/reakit-library@2.0.0
- @twilio-paste/styling-library@3.0.0
- @twilio-paste/style-props@9.0.0
- @twilio-paste/theme@11.0.0
- @twilio-paste/types@6.0.0
4d1f7c65e#3360 Thanks @SiTaggart! - Improved types where Paste extends the base HTML element that a component is based on, so that the existing blocked styling properties are not exposed as valid properties for the component via Typescript. This leads to less confusion around what is supported by a Paste component.Existing blocked component properties include:
classNamestylecolor
950568e63#3304 Thanks @serifluous! - Updates navigation component descriptions
76b28cb9d#3255 Thanks @SiTaggart! - [Status] paired iconography should be decorative and paired with visible, descriptive text
5958ffb5b#3230 Thanks @SiTaggart! - [Status] Introduces a new Status badge for communicating the status of processes and connections. Provides compositions of the Status Pattern for ease of use.