Page level
Alert list
An alert list, whether containing a single alert list item or multiple alert list items, lives at a page or app level above the UI on the z-axis. On the y-axis, it can be placed directly below the unified navigation or lower if it overlaps with interactive elements like tabs to avoid any conflicts.
Alert list placed below the unified navigation
Alert list placed lower below the tabs to avoid overlapping
Empty state at a page level
Modal
An alert modal displays information in a layer above the app. This type of interruptive interaction should only be used when it's necessary to take users away from their current workflow in scenarios such as unsaved changes, expired sessions, and confirmation of deletions.
Alert modal for expired sessions
Contextual
Alert
An alert can be used contextually in a section or widget on a page to communicate a message that only applies to the specific context where it’s used.
Alert in a section of a page
Alert in a modal
Alert in a card
Message
Similar to an alert, a message can also be used contextually in a section or widget on a page. The most frequently used message type is an empty state message that’s used to reserve a dedicated space for content to display later.
Empty state message in a section of a page
Empty state message in a modal
Multiple messages in widgets on a page
Highlighted value
Highlighted values are most frequently used in a record header, card, and list cell to communicate status or category. They have a small visual footprint but help in drawing the user’s attention.
Highlighted value in the metadata section of a record header
Highlighted value in cards
Highlighted value in list cells
Form field messaging
A form field message has the most limited use case among all messaging components as it’s only used in forms. As a render function in form components, it can be used in an input, radio button, etc.
Form field messaging rendered below an input
Form field messaging rendered below a radio button group