Call out information

The optimal method to highlight information depends on the content and its context.

Critical messages

To highlight critical information that users absolutely must see, use the alert component. Depending on the nature of the message, you can specify whether the alert is dismissible. In general, an alert should be dismissible if users only need to see it once, although you may want to include a way for users to reopen it. Meanwhile, an alert should not be dismissible if it is important for users see every time or if it is triggered by underlying data.

Summary data

For dense sets of data, you can create summaries to highlight important points. To call out these points, use a key information component. They draw user attention, and then users can decide whether to dig into the underlying data or rely on the high-level understanding.

Status

To communicate the status of a record when it is important enough to highlight, use a label component. The bold styling catches the eye without distracting users. In general, labels communicate binary information or values from a small, system-defined list. You should only use labels for information that is important enough to warrant the bold treatment. If you use too many labels, they become distracting and lose their ability to grab user attention.

Process updates

To communicate a message that a background process triggers, use the toast component. Background processes include processes that users initiate and system processes that users need to be aware of.

Depending on the nature of the message, you can specify whether the toast fades automatically or requires users to dismiss it. In general, success and info toasts should fade automatically, while warning and danger toasts should require users to manually dismiss the messages because they often require follow-up actions.