Object status

// import all components for Object status patterns

import { Box } from "@twilio-paste/core/box";
import {​ Text } from "@twilio-paste/core/text";
import {​ StatusBadge } from "@twilio-paste/core/status-badge";
import {​ StatusMenu } from "@twilio-paste/core/status-menu";
import { ProcessDisabledIcon } from "@twilio-paste/icons/esm/ProcessDisabledIcon";
import { ProcessDraftIcon } from "@twilio-paste/icons/esm/ProcessDraftIcon";
import { ProcessErrorIcon } from "@twilio-paste/icons/esm/ProcessErrorIcon";
import { ProcessInProgressIcon } from "@twilio-paste/icons/esm/ProcessInProgressIcon";
import { ProcessNeutralIcon } from "@twilio-paste/icons/esm/ProcessNeutralIcon";
import { ProcessSuccessIcon } from "@twilio-paste/icons/esm/ProcessSuccessIcon";
import { ProcessWarningIcon } from "@twilio-paste/icons/esm/ProcessWarningIcon";

An Object status is used to communicate the dynamic state of an object. Use it to help a user identify something that requires their attention and often, their action. When a status is used to indicate to the user that they need to take action, be sure to provide clear controls to take that action (check out the example in Process status).

Object statuses are:

• Always related to an object. For example, this pattern applies to SIMs and regulatory bundles, but not to a step in a wizard flow. Instead, use the Error state pattern or Progress Steps component.
• Not used for static attributes. For example, “SMS-capable” is not a status on a phone number.
• Different from notification and feedback messaging, which is in direct response to a user action.
• Different from alert messaging, which is from the system.
• Used to draw a user’s attention to important information. Use plain text statuses when the status is not critical information for a user to know.

Non-text status indicators (such as icons or status dots) should be paired with text whenever possible and should always be given a title to give context and meaning to the icon or shape. Check out the icon usage guidelines for more detailed accessibility information.

Process statuses indicate an object’s progress through a set of stages. Process statuses should always be paired with text.

To determine how to show a process status:

• If additional information is needed about the status, use Icon, Text, and Anchor (optional).
• If it’s in a Table and no additional information is needed, use a borderless Status Badge.
• Otherwise, use the default Status Badge.

Placement of the status in a Table should depend on the importance of the status to the given user flow and should be tested with users.

For statuses that are not as critical to a user’s workflow, use plain text statuses.

Not all object statuses need icons or shapes. In fact, giving every status an icon or a shape can make it difficult for a user to find and focus on the most critical information

If some statuses—such as successes or failures—are critical, use plain text for the other statuses that a user doesn’t need to identify as quickly.

Connectivity statuses are used to show if a user, object, or system is online or offline. Connectivity statuses should always be paired with text.

To determine how to show a connectivity status:

• If additional information is needed to explain the status, use Icon, Text, and Anchor.
• If it’s in a Table and no additional information is needed, use a borderless Status Badge.
• Otherwise, use the default Status Badge.

Use a Status Menu to let users swap between statuses.

• Adding text labels to status icons
• Showing error previews in a table
• Text color for success text and accessibility
• Bulk Action - Table component usage
• Visual and accessibility for Sender Id management section
• Status of different services and objects through out product's life-cycle
• Event Streams (Office Hours: Thu Dec 3)