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.


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.

An example of a dialog requesting user confirmation for a destructive action.
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.

An example of a snackbar confirming the completion of an action.
An example of a snackbar confirming the completion of an action with a link to view the result of the action.
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
Back to Top