Modals and popovers

Overlaying data

Modals communicate additional information through the use of an overlaid window, allowing users to maintain in the context of their workflow.

Last updated: Aug 2019

Modal dialogs

Modals are used to work with large amounts of data that would need a new page to complete. Modals are great for wizards and long forms because they focus a user on the new task without switching context. Modals do not stack on top of each other; they all share a common Y-axis reveal and are as wide as the primary column on a split layout page.

Default modal style

Used on large screens and tablets, they fix themselves just below the header and expand downward as needed. They must leave at least 40 pixels of space at the bottom and scroll overflow content inside. Modals are the same width as the primary layout column in a harness and need dual "Cancel" actions, as some users miss the "x" in the top right corner to dismiss the modal.

Desktop modal example

Last updated: Dec 2019


Popovers are used to show a small piece of related data or smaller flow for a specific element on the screen.

They are not meant to handle massive forms or screenflows. Popovers can stack on top of other popovers and modals, provided they are launched from that popover or modal. They can be dismissed by interacting anywhere outside the popover.

Last updated: Apr 2020


The toast component renders toasts to display short messages. They appear toward the bottom of the screen and appear after some user action has been taken or completed.

Last updated: Oct 2020