Modal
Modals focus the user's attention exclusively on one task or piece of information via a window that sits in front of the page content.Prop | Required | Description | Type |
|---|---|---|---|
title | ✅ | Short title of the dialog. | string |
description | ✅ | Modal content can be a string or a component in case you need links. | string | number | false | true | ReactElement<any, string | JSXElementConstructor<any>> | ReactPortal | { key?: string | number; ref?: null; props?: { children?: boolean | ReactChild | ReactPortal | StrictReactFragment; }; } | (boolean | ReactChild | ReactPortal | StrictReactFragment)[] |
controls | ✅ | Provide an object to define the confirm and cancel controls' labels and functions. | ControlsProps |
isOpen | ✅ | Define if the modal is open. | boolean |
onClose | ✅ | Callback function when the close action is triggered. | () => void |
disableOutsideDismiss | — | Whether to disable dismissing the modal when interacting outside. Defaults to false. | boolean |
restoreFocusTo | — | Element to restore focus to when the modal closes. If not provided, focus will be restored to the element that had focus before the modal opened. | RefObject<HTMLElement> |
Prop | Required | Description | Type |
|---|---|---|---|
isOpen | ✅ | Define if the modal is open. | boolean |
onClose | ✅ | Callback function when the close action is triggered. | () => void |
children | ✅ | React component that will be the content of the modal. | string | number | false | true | ReactElement<any, string | JSXElementConstructor<any>> | ReactPortal | { key?: string | number; ref?: null; props?: { children?: boolean | ReactChild | ReactPortal | StrictReactFragment; }; } | (boolean | ReactChild | ReactPortal | StrictReactFragment)[] |
header | — | Header of the modal, can be a string or a custom component. | string | number | false | true | ReactElement<any, string | JSXElementConstructor<any>> | ReactPortal | { key?: string | number; ref?: null; props?: { children?: boolean | ReactChild | ReactPortal | StrictReactFragment; }; } | (boolean | ReactChild | ReactPortal | StrictReactFragment)[] |
maxWidth | — | Define the max-width of the modal. Defaults to 47.5rem. | string | numberSupports responsive prop syntax |
ariaLabelledBy | — | Pass the id of element that labels the modal. NOTE: Defaults to a generated id put on header element if not passed. | string |
ariaDescribedBy | — | Pass the id of element that describes the modal. | string |
disableOutsideDismiss | — | Whether to disable dismissing the modal when interacting outside. Defaults to false. | boolean |
restoreFocusTo | — | Element to restore focus to when the modal closes. If not provided, focus will be restored to the element that had focus before the modal opened. | RefObject<HTMLElement> |
controls | — | Provide an object to define the confirm and cancel controls' labels and functions. | ControlsProps |
footer | — | Custom component to replace the controls in the modal. | string | number | false | true | ReactElement<any, string | JSXElementConstructor<any>> | ReactPortal | { key?: string | number; ref?: null; props?: { children?: boolean | ReactChild | ReactPortal | StrictReactFragment; }; } | (boolean | ReactChild | ReactPortal | StrictReactFragment)[] |
Prop | Required | Description | Type |
|---|---|---|---|
isOpen | ✅ | Define if the drawer is open. | boolean |
onClose | ✅ | Callback function when the close action is triggered. | () => void |
children | ✅ | React component that will be the content of the modal. | string | number | false | true | ReactElement<any, string | JSXElementConstructor<any>> | ReactPortal | { key?: string | number; ref?: null; props?: { children?: boolean | ReactChild | ReactPortal | StrictReactFragment; }; } | (boolean | ReactChild | ReactPortal | StrictReactFragment)[] |
title | ✅ | Title of the drawer. | string |
ariaDescribedBy | — | Pass the id of element that describes the modal. | string |
ariaLabelledBy | — | Pass the id of element that labels the modal. | string |
disableOutsideDismiss | — | Whether to disable dismissing the modal when interacting outside. | boolean |
maxWidth | — | Define the max-width of the drawer. | string | numberSupports responsive prop syntax |
restoreFocusTo | — | Element to restore focus to when the drawer closes. If not provided, focus will be restored to the element that had focus before the drawer opened. | RefObject<HTMLElement> |
footerControls | — | Optional controls located in the footer. | ControlsProps[] |
hideTitle | — | If true, the title will be hidden for view. You will still need to provide a title and it is announced for screen readers. | boolean |