Skip to content
Telescope
Components

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

Telescope's Modal uses Radix Dialog to implement 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.
Didn't find what you were looking for?
Let us know in #team-design-systems or make a request.
Edit this page