Modal

The Modal component lets you show important, additional content in an overlay.

OverviewPropertiesUsage

The overlay is always centered on the page and covers the on-screen content until the user closes it.

The Modal must have a trigger that controls the open status of the modal. The useOverlayWithTrigger hook provides the corresponding props.

It's also essential to add at least one focusable element inside the Modal so that it's keyboard accessible. If no focusable element is available, the focus will be given to the document when opening the modal.

Import

import { Modal } from '@dynatrace/strato-components/overlays';

Demo

Control size

Use the size prop of the modal to change its size. The default value is medium.

Control dismissible state

Allows you to control the dismissible state of your modal.

Nest

You can place different content or additional modals inside a modal. If a modal within the modal (a nested modal) is triggered, the focus is switched to the nested modal and the first modal loses focus and is treated like a background element.