Skip to content
Telescope

Modal

A page overlay that displays information and blocks interaction with the page until an action is taken or the modal is dismissed.
(Psst...click this to see a modal in action)

Features

  • Traps focus within the modal.
  • Locks background scrolling by default.
  • Focusses the first interactive element when opened.

When to use

See our design pattern around overlays to learn why and when you should use this component.

Accessibility

We use @reach/dialog to make the Modal accessibility. It implements the WAI-ARIA principles of Dialog (Modal).

The Modal.Close component supplies an aria-label of Close to the underlying button.

Related components

  • Drawer: A panel that slides out from the edge of the screen to focus a user's attention on completing a task or viewing details about an item.
  • Modal Split: Modal split is a focused-experience, introduced as an overlay to explain to customers concepts or actions within the product.
  • Page: A collection of components which let you compose a page in our web application.
  • Popover: A small overlay that opens on demand. Popovers allow users to access additional content and actions without cluttering the page.