Components

Overlays & menus

Modals, popovers, dropdown menus and tooltips. They trap focus where needed, close on Escape and on click-outside, and are always styled, never the native browser dialogs.

Overlays & menus
A quiet tooltip
<Modal title="Delete spec" open={open} onClose={close}>
  <p>This cannot be undone.</p>
  <Button variant="secondary" onClick={close}>Cancel</Button>
  <Button>Delete spec</Button>
</Modal>

<Dropdown
  label="Options"
  items={['Duplicate', 'Rename', 'Delete']}
/>

Guidelines

Do
  • Dim the page with the scrim behind a modal and lift it on the overlay surface.
  • Trap focus, close on Escape and on a click outside.
  • Mark the selected item in a menu with a check.
Do not
  • Never use the native alert, confirm or prompt.
  • Do not animate overlays with a bounce or a spin. A gentle fade and small move only.