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.
Used for this
- To interrupt users with a dialog that requests information or an action
Not for this
- 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
- Name8.76.4•View source•View on npm
- Installnpm install @zendeskgarden/react-modals
- Depsnpm install react react-dom styled-components @zendeskgarden/react-theming
- Importimport { Body, Close, Footer, FooterItem, Header, Modal } from '@zendeskgarden/react-modals'
API
Body
Extends HTMLAttributes<HTMLDivElement>
Close
Extends ButtonHTMLAttributes<HTMLButtonElement>
Footer
Extends HTMLAttributes<HTMLDivElement>
FooterItem
Extends HTMLAttributes<HTMLSpanElement>
Header
Extends HTMLAttributes<HTMLDivElement>
| Prop name | Type | Default | Description |
|---|---|---|---|
isDanger | boolean | – | Applies danger styling |
tag | any | div | Updates the element's HTML tag |
Modal
Extends HTMLAttributes<HTMLDivElement>
| 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 |