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.
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.View Live Component
- 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.
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.View Live Component
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