Modal

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

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-preview/overlays';

Use Cases

CodeSandbox

Control size of modal

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

CodeSandbox

Control dismissible state of modal

Allows you to control the dismissible state of your modal.

CodeSandbox

Nest modals

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.

CodeSandbox

Handle the focus if the trigger is removed when opening

If you're using a trigger that is removed from the DOM when the modal is opened, you have to take care of some parts of the focus handling to ensure that proper keyboard navigation is still possible. When the trigger is removed, you may have to prevent the trigger from moving the focus away from the modal and move it back to an element on your page after dismissing the modal. Check out the following example to see how this could work when using a Menu.Item as trigger for the modal.

CodeSandbox

Props

ModalProps

extends,

Name	Type	Default	Description
title		-	Title of the modal, which is shown in the header section.
footer?		-	Footer section of the modal, where customized content can be added.

BaseModalProps

extends,

Name	Type	Default	Description
show?		false	Controls when the modal is shown.
size?		'medium'	Sets the size of the modal.
onDismiss?	() =>	-	Handler function that is called when the modal is closed.
dismissible?		true	Determines if you can click the backdrop to dismiss the modal. If true, pressing "ESC" also dismisses the modal.