| id | Modal | ||||
|---|---|---|---|---|---|
| section | components | ||||
| cssPrefix | pf-v6-c-modal-box | ||||
| propComponents |
|
||||
| ouia | true |
import { Fragment, useRef, useState } from 'react'; import WarningTriangleIcon from '@patternfly/react-icons/dist/esm/icons/warning-triangle-icon'; import RhUiAttentionBellFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-attention-bell-fill-icon'; import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon'; import formStyles from '@patternfly/react-styles/css/components/Form/form';
Basic modals give users the option to either confirm or cancel an action.
To flag an open modal, use the isOpen property. To execute a callback when a modal is closed, use the onClose property.
The <ModalBody>, <ModalHeader>, and <ModalFooter> components are not required, but are typically used to display the main content of the modal, modal title, and any button actions, respectively.
To enable keyboard-accessible scrolling of a modal’s content, pass tabIndex={0} to the <ModalBody>.
To provide additional information about a modal, use the description property. Descriptions are static and do not scroll with other modal content.
To override a modal's default center alignment, use the position property. In this example, position is set to "top", which moves the modal to the top of the screen.
To adjust the size of a modal, use the variant property. Modal variants include "small", "medium", "large", and "default".
In the following example, you can display each modal size option. To launch a modal with a specific size, first select the respective radio button, followed by the "Show modal" button.
To choose a specific width for a modal, use the width property. The following example has a width of "50%".
To add a custom header to a modal, your custom content must be passed as a child of the <ModalHeader> component. Do not pass the title property to <ModalHeader> when using a custom header.
To exclusively present information in a modal, remove the header and/or footer.
When a modal has no header or footer, make sure to add an aria-label explicitly stating this, so that those using assistive technologies can understand this context.
To add an icon before a modal’s title, use the titleIconVariant property, which can be set to a "success", "danger", "warning", or "info" variant. The following example uses a "warning" variant.
To add a custom icon before a modal’s title, set titleIconVariant to an imported custom icon. The following example imports and uses an icon.
To guide users through a series of steps in a modal, you can add a wizard to a modal. To configure the <Wizard>, pass an array that contains a “name” and “component” value for each step into the steps property.
To present a menu of actions or links to a user, you can add a dropdown to a modal.
Using the Dropdown's default append location will interfere with keyboard accessibility due to the modal's
built-in focus trap. To allow the dropdown to visually break out of the modal container, set the Dropdown's
popperProps appendTo property to id of the focus trap for the modal. This can be done by adding prop
focusTrapId to the modal, and then setting the append location to that as per this example. Otherwise you
can use inline to allow it to scroll within the modal itself. Appending to the focus trap should allow the
menu to expand visually outside the Modal (no scrollbar created in the Modal itself), and still allow
focusing the content within that menu via keyboard. You should also handle the modal's closing behavior by
listening to the
onEscapePress callback on the <Modal> component. This allows the "escape" key to collapse the
dropdown without closing the entire modal.
To help simplify and explain complex models, add a help popover. Only place a help icon at the modal level if its information applies to all content in the modal. If the help popover is specific to a particular modal section, place the help icon beside that section instead.
To collect user input within a modal, you can add a form.
To enable form submission from a button in the modal's footer (outside of the <Form>), set the button's form property equal to the form's id.
To customize which element inside the modal receives focus when initially opened, use the elementToFocus property`.