Popovers

Popovers are a type of container lying on top of other elements on the document on a special plan (called top layer). They either float entirely independently like dialogs, or can be attached to the button controlling them, like dropdowns or tooltips.

  • Limit the different purposes a popover element can contain, it shouldn't be a toolbox
  • If its content is important in itself, you should dedicate a page or a page section to it instead of a popover
  • Avoid nested popovers at all cost, only one should be opened at the same time

Tooltip

A specific kind of popover that should mainly be used for informational feedback purposes. You should check its dedicated page for that matter.

The element often used to display menu options through a button input which is visually anchored to.

Example showcase

Context menus

In a listing context, a dropdown can be used as a context menu to offer actions on a chosen element of the list.

  • It should only contain link or buttons as actionable controls
  • Heading labels can be added if the menu purpose is ambiguous or if controls need to be grouped
  • Elements label should be in Title Case
  • Group elements by type (don't mix links and buttons)
  • Order elements by importance, frequency, with destructive actions at the end of its group
Example showcase

Dialogs

They are a kind of popover with a backdrop around it and have a close button and should include a main action button at the end as they require an interaction from the user before they can return to whatever is underneath (also called "not light dismissible").

They can be used to confirm an important action. A dedicated component has been made for this purpose.

Example showcase