System Communication
The following system communication patterns conditionally appear on the page based on system status or user actions. For best usability, it is important to choose the right way to communicate with your users based on the priority of the message and complexity of the actions.
Tips for choosing the right container
Dialogs are highly interruptive and used for getting the user's full attention for brief, simple interactions like confirming critical actions or changes and need user interactions to dismiss. Banners are great for sharing important information and actions in the same context, and may or may not require user actions depending on the severity of the information. Snackbars are the most subtle container used for temporary messages ideal for brief confirmations.
Dialog
A dialog is a container that communicates system feedback, informational messages, and confirmation of actions.
Dialogs are conversational, straightforward, contain only text, and don’t require any complex interactions. Dialogs appear on top of pages and panels and disable the content underneath until the user interacts with the dialog.
- Provide system feedback or information users need to proceed with their task
-
Confirms a single action
These are useful to confirm any destructive actions like deleting or unsaved changes.
-
Only contains text
Consider using a modal if more information needs to be displayed.
- Can trigger a snackbar after the user has acknowledged the action and the dialog closes
-
Do not trigger other layout containers
Flyouts and side panels cannot be triggered to open from a dialog.
-
Do not use more than one primary action
If more than one action is needed, consider using another pattern.
-
Do not use to display error messages
This blocks the user from accessing the page and fixing the error.
Banner
Banners communicate the system status and convey essential changes or conditions to the user, often accompanied by optional actions or links. The intrusiveness of the banner should align with the importance level of the message it conveys.
Banners are characterized by their location and severity. Their location indicates the specific product area they pertain to, while the way they appear is context-driven, whether it's on page load, system status update, or user interaction. The severity of the message determines the visual style they receive.
Location
Global
Global banners are located just below the top bar, directing to the right of side navigation, and above the main page content. Use global banners to display messages related to important site-wide issues that impact the entire product.
These banners stretch across the full width of the content area without any extra space on the sides.
Sectional
Use sectional banners to display messages that pertain to specific sections of the product. They are located right above the area they refer to, either directly above a section of the page or within a specific container.
These banners stretch across the entire width of the section or container and share the same spacing rules as the content they're associated with.
Severity
Supplemental
These banners appear on page load and are non-interruptive to the user’s workflow. They contain supplemental messages that are not urgent and do not require actions. They can be persistent or dismissible, and may contain a link to another page but do not trigger additional actions.
Dismissible, Non-interruptive, Supplemental, Optional Link
Informational
These banners appear upon a system status update or user action, but do not require immediate actions and can be dismissed without affecting the user’s workflow.
Dismissible, Non-interruptive, Optional Action
Warning
Warning banners appear when the current actions of the user may lead to undesirable affects or behaviors, appearing on page load or user action. These do not prevent the user from continuing their workflow, and the location should be interruptive to call attention to the importance of the message.
Non-Dismissible, Interruptive, Important, Optional Action
Error
Error banners appear when users must address an issue before continuing their workflow. Similar to warning banners, these can appear on page load or user action and should be interruptive. They should offer clear explanations for why these errors happened and how to fix them.
For instance these banners can be used to consolidate errors on form submissions. If there are more than two errors, we should show the total number of errors and link to the first one on the page. For further guidance on handling errors, please refer to our Error guidelines.
Non-Dismissible, Interruptive, Important, Optional Action, Block-Workflow
Best Practices
-
Use to display prominent messages and can include one related action
The severity of the banner determines whether the banner needs an action or can be dismissed.
- Place banners directly above the area they relate to
-
Do not cover content and do not make the banner sticky
Both global and sectional banners should scroll with the content they relate to.
-
Do not display more than one banner of the same severity at a time
There may be cases where multiple banners of different severities appear.
-
Do not add links within the message
All actions should be represented as buttons separate from the message.
Snackbar
Snackbars appear near the bottom left edge of a page and contain a brief sentence about the completion of a system action.
Snackbars contain only text and may include a link related to the action. Multiple snackbars can appear stacked If multiple actions have occured, however this is not recommended.
-
Use to communicate the successful completion of an action initiated by the user
This can include communicating the completion of adding or removing information, uploading a file, or submitting a form.
- The sentence should be no more than 50 characters
- Can open a new page related to the action
- Do not trigger other layout containers
- Do not use more than one link