Table of Contents

Modal

A Modal is a dialog box that sits on the top of the current page. Modals block access to the rest of the page and force user interaction.

Table of Contents

Used for this

Not for this

To provide users with information that doesn’t require interruption, use a Notification instead

How to use it

The typical usage of a Modal component.

Use Danger styling for modals that enable a destructive action.

A modal can be default or large.

Prop name	Type	Default	Description
appendToNode	Element		Defines the DOM element that the modal will attatch to
backdropProps	HTMLAttributes<HTMLDivElement>		Passes HTML attributes to the backdrop element
focusOnMount	boolean		Directs keyboard focus to the modal on mount
isAnimated	boolean	true	Animates the modal
isCentered	boolean	true	Centers the modal on the backdrop
isLarge	boolean		Applies large styling
onClose			Handles close actions. Can be triggered from the backdrop and from the close icon. Parameters `event` The DOM event that triggered the close action
restoreFocus	boolean		Returns keyboard focus to the element that triggered the modal

Extends HTMLAttributes<HTMLDivElement>

Extends ButtonHTMLAttributes<HTMLButtonElement>

Extends HTMLAttributes<HTMLDivElement>

Extends HTMLAttributes<HTMLSpanElement>

Extends HTMLAttributes<HTMLDivElement>

Prop name	Type	Default	Description
isDanger	boolean		Applies danger styling
tag	any	div	Updates the element's HTML tag