Modals

Modals are components that take focus and overlay on top of other content on the page. Modals are used to get user attention for important notices, to request user input or decisions, and in situations where the user is required to interact before continuing. Both the modal and alert dialog components are modal dialogs: they interrupt interactions with the rest of the page, whereas non-modal dialog boxes allow users to interact with other parts of the page.

On this page

Import

Modal

Open in Storybook

Alert Dialog

Open in Storybook

Props

Modal Props

NameDescriptionDefault
aria-describedby

The id of the element that describes the Modal. This should be the same as the id prop on ModalBody.

string		-
aria-labelledby*

The id of the element that labels the Modal. This should be the same as the id prop on ModalHeader.

string		-
children*

Children to render within the Modal.

NonNullable<ReactNode>		-
onClose

Function called when the close button or overlay is clicked or escape key pressed Note that event is a native DOM event, not a React synthetic event.

((event: MouseEvent | TouchEvent | KeyboardEvent) => void)		() => {}
innerContainerClassName

Class names to be applied to the inner container. Use the className prop if targeting the modal scrim.

string		-

Modal Header Props

NameDescriptionDefault
id*

The identifier of the ModalHeader. This should be the same as the aria-labelledby prop on Modal.

string		-
children*

Children to render within the ModalHeader.

NonNullable<ReactNode>		-
closeButtonProps

Props to pass through to the close button

Omit<Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref">, "onClick" | "type">		-
hideCloseButton

If true, will remove the close button from the ModalHeader. This does not prevent the modal from being closed by other means.

boolean		-
labelOverrides

Overrides for labels that have been defaulted in the component.

ModalHeaderLabelOverrides		-

Modal Body Props

NameDescriptionDefault
id

The identifier of the ModalBody. This should be the same as the aria-describedby prop on Modal.

string		-
children*

Children to render within the ModalBody.

NonNullable<ReactNode>		-

Modal Footer Props

NameDescriptionDefault
children*

Children to render within the ModalFooter.

NonNullable<ReactNode>		-

Alert Dialog Props

NameDescriptionDefault
children*

Children to render within the Modal.

NonNullable<ReactNode>		-
onClose

Function called when the escape key pressed

(() => void)		-
ref
((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null		-

Alert Dialog Header Props

NameDescriptionDefault
children*

Children to render within the Modal.

NonNullable<ReactNode>		-
icon

Custom icon displayed at the top of the DialogBoxHeader.

ReactElement<any, string | JSXElementConstructor<any>>		-
id*

The ID for the DialogBoxHeader, necessary for accessibility and labeling.

string		-
ref
((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null		-

Alert Dialog Body Props

NameDescriptionDefault
children*

Children to render within the Modal.

NonNullable<ReactNode>		-
actionSlot

Should contain the actions available to the DialogBox

NonNullable<ReactNode>		-
id*

The ID for the DialogBoxBody, necessary for accessibility and labeling.

string		-
ref
((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null		-

Questions?

Connect with the DLS Team on Slack or by email.

Resources

Check out additional resources.