# Modal

A page overlay that displays information and blocks interaction with the page until an action is taken or the modal is dismissed.

Tabs: [Guidelines](/components/web/modal/modal.guidelines.md) · [Code](/components/web/modal/modal.code.md) · [Content](/components/web/modal/modal.content.md)

## 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](/patterns/overlays/overlays.about) to learn why and when you should use this component.

## Accessibility

Telescope's `Modal` uses [Radix Dialog](https://www.radix-ui.com/primitives/docs/components/dialog) to implement the [WAI-ARIA principles of Dialog (Modal)](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/).

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

## Related components

- [Drawer](/components/web/drawer/drawer.guidelines): 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](/components/web/modal-split/modal-split.guidelines): Modal split is a focused-experience, introduced as an overlay to explain to customers concepts or actions within the product.
- [Page](/components/web/page/page.guidelines): A collection of components which let you compose a page in our web application.
- [Popover](/components/web/popover/popover.guidelines): A small overlay that opens on demand. Popovers allow users to access additional content and actions without cluttering the page.