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.
- To interrupt users with a dialog that requests information or an action
- To provide users with information that doesn’t require interruption, use a Notification instead
How to use it
Default
The typical usage of a Modal component.
Danger
Use Danger styling for modals that enable a destructive action.
Size
A modal can be default or large.
Configuration
- Name9.5.3•View source•View on npm
- Installnpm install @zendeskgarden/react-modals
- Depsnpm install react react-dom styled-components @zendeskgarden/react-theming
- Importimport { Modal } from '@zendeskgarden/react-modals'
API
Modal
| 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 |
Modal.Body
Extends HTMLAttributes<HTMLDivElement>
Modal.Close
Extends ButtonHTMLAttributes<HTMLButtonElement>
Modal.Footer
Extends HTMLAttributes<HTMLDivElement>
Modal.FooterItem
Extends HTMLAttributes<HTMLSpanElement>
Modal.Header
Extends HTMLAttributes<HTMLDivElement>
| Prop name | Type | Default | Description |
|---|---|---|---|
isDanger | boolean | Applies danger styling | |
tag | any | div | Updates the element's HTML tag |