Skip to main content

Overlay Patterns

Overlay patterns enhance user experience by presenting additional information or functionality on top of existing content.

Decision tree

You can follow this decision tree to choose the most appropriate UI component based on the specific context, importance, and user interaction requirements of your product interface.

You can take a closer look at this in our overlay patterns file.

A decision tree to choose the most appropriate UI component based on the specific context.

A modal is a surface that overlays the page’s main content and is used to display information, gather input or confirm actions.

A modal containing a heading, multiple lines of text and two buttons placed below the modal heading.
Do
  • Use for multi-step or single-step flows.
  • Use them to display important information that needs the user’s action or dismissal.
  • Use them when the user needs to perform one specific task.
  • They are triggered by the user.
Don't
  • Don’t use them if the user’s primary flow doesn’t have to be disrupted.

Popover

A popover is a small overlay that appears above content, offering extra information, context, or options to the user.

A popover that contains a list of items.
Do
  • Use them to display contextual actions.
  • They are triggered by the user.
Don't
  • Don’t use them when there are no actions to perform.
  • Don’t use them for large amounts of content or actions.

Toast

A toast shows short updates about app processes at the bottom of the screen.

A toast component that contains one line of text and a close icon to dismiss.
Do
  • Use them for quick, succinct messaging.
  • They can be triggered by the system as a response to a user’s action.
Don't
  • Don’t use them for long form content.
  • Don’t use them when the message needs to be persistent.
  • Don’t use multiple toasts at the same time.

Tooltip

A tooltip is a contextual message that appears when users interact with an element, providing additional information or guidance.

A tooltip that contains multiple lines of text and a close icon to dismiss.
Do
  • Use them to explain UI function or give quick information.
  • They are triggered by the user.
Don't
  • Don’t use them for long form content.
  • Don’t use them to display (or hide) essential information which the user would need to complete their tasks.

Z-index

Z-index is a CSS property used in web design to control the stacking order of elements on a page. It determines which elements appear in front of others, making it useful for managing overlapping elements in user interfaces.

We’ve prepared a table to help you understand how our components stack on top of each other.

ComponentZ-index
Tooltip2
Popover3
Modal4
Toast6