Examples
With overflowing content
If the content that you're passing to the modal is likely to overflow the modal content area, pass tabIndex={0} to the modal to enable keyboard accessible scrolling.
Props
Modal
| Name | Type | Default | Description |
|---|---|---|---|
| childrenrequired | React.ReactNode | Content rendered inside the Modal. | |
| actions | any | [] | Action buttons to add to the standard Modal Footer, ignored if `footer` is given |
| appendTo | HTMLElement | (() => HTMLElement) | () => document.body | The parent container to append the modal to. Defaults to document.body |
| aria-describedby | string | '' | Id to use for Modal Box descriptor |
| aria-label | string | '' | Accessible descriptor of modal |
| aria-labelledby | string | null | '' | Id to use for Modal Box label |
| bodyAriaLabel | string | Accessible label applied to the modal box body. This should be used to communicate important information about the modal box body div if needed, such as that it is scrollable | |
| bodyAriaRole | string | Accessible role applied to the modal box body. This will default to region if a body aria label is applied. Set to a more appropriate role as applicable based on the modal content and context | |
| className | string | '' | Additional classes added to the Modal |
| description | React.ReactNode | Description of the modal | |
| disableFocusTrap | boolean | Flag to disable focus trap | |
| footer | React.ReactNode | Custom footer | |
| hasNoBodyWrapper | boolean | false | Flag indicating if modal content should be placed in a modal box body wrapper |
| header | React.ReactNode | Complex header (more than just text), supersedes title for header content | |
| help | React.ReactNode | Optional help section for the Modal Header | |
| id | string | undefined | An ID to use for the ModalBox container |
| isOpen | boolean | false | Flag to show the modal |
| onClose | () => void | () => undefined as any | A callback for when the close button is clicked |
| onEscapePress | (event: KeyboardEvent) => void | Modal handles pressing of the Escape key and closes the modal. If you want to handle this yourself you can use this callback function | |
| ouiaSafe | No type info | true | |
| position | literal | Alternate position of the modal | |
| positionOffset | string | Offset from alternate position. Can be any valid CSS length/percentage | |
| showClose | boolean | true | Flag to show the close button in the header area of the modal |
| title | string | '' | Simple text content of the Modal Header, also used for aria-label on the body |
| titleIconVariant | 'success' | 'danger' | 'warning' | 'info' | 'default' | React.ComponentType<any> | null | Optional alert icon (or other) to show before the title of the Modal Header When the predefined alert types are used the default styling will be automatically applied |
| titleLabel | string | '' | Optional title label text for screen readers |
| variant | 'small' | 'medium' | 'large' | 'default' | 'default' | Variant of the modal |
| width | number | string | Default width of the Modal. |
ModalBox
| Name | Type | Default | Description |
|---|---|---|---|
| aria-describedbyrequired | string | Id to use for Modal Box description | |
| childrenrequired | React.ReactNode | Content rendered inside the ModalBox. | |
| aria-label | string | '' | Accessible descriptor of modal |
| aria-labelledby | string | Id to use for Modal Box label | |
| className | string | '' | Additional classes added to the ModalBox |
| position | literal | Alternate position of the modal | |
| positionOffset | string | Offset from alternate position. Can be any valid CSS length/percentage | |
| variant | 'small' | 'medium' | 'large' | 'default' | 'default' | Variant of the modal |
ModalBoxBody
| Name | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | null | Content rendered inside the ModalBoxBody |
| className | string | '' | Additional classes added to the ModalBoxBody |
ModalBoxCloseButton
| Name | Type | Default | Description |
|---|---|---|---|
| className | string | '' | Additional classes added to the close button |
| onClose | () => void | () => undefined as any | A callback for when the close button is clicked |
ModalBoxFooter
| Name | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | null | Content rendered inside the Footer |
| className | string | '' | Additional classes added to the Footer |
ModalContent
| Name | Type | Default | Description |
|---|---|---|---|
| boxIdrequired | string | Id of the ModalBox container | |
| childrenrequired | React.ReactNode | Content rendered inside the Modal. | |
| descriptorIdrequired | string | Id of the ModalBoxBody | |
| labelIdrequired | string | Id of the ModalBox title | |
| actions | any | [] | Action buttons to add to the standard Modal Footer, ignored if `footer` is given |
| aria-describedby | string | Id of Modal Box description | |
| aria-label | string | '' | Accessible descriptor of modal |
| aria-labelledby | string | null | Id of Modal Box label | |
| bodyAriaLabel | string | Accessible label applied to the modal box body. This should be used to communicate important information about the modal box body div if needed, such as that it is scrollable | |
| bodyAriaRole | string | Accessible role applied to the modal box body. This will default to region if a body aria label is applied. Set to a more appropriate role as applicable based on the modal content and context | |
| className | string | '' | Additional classes added to the button |
| description | React.ReactNode | null | Description of the modal |
| disableFocusTrap | boolean | false | Flag to disable focus trap |
| footer | React.ReactNode | null | Custom footer |
| hasNoBodyWrapper | boolean | false | Flag indicating if modal content should be placed in a modal box body wrapper |
| header | React.ReactNode | null | Complex header (more than just text), supersedes title for header content |
| help | React.ReactNode | null | Optional help section for the Modal Header |
| isOpen | boolean | false | Flag to show the modal |
| onClose | () => void | () => undefined as any | A callback for when the close button is clicked |
| ouiaSafe | No type info | true | |
| position | literal | Alternate position of the modal | |
| positionOffset | string | Offset from alternate position. Can be any valid CSS length/percentage | |
| showClose | boolean | true | Flag to show the close button in the header area of the modal |
| title | string | '' | Simple text content of the Modal Header, also used for aria-label on the body |
| titleIconVariant | 'success' | 'danger' | 'warning' | 'info' | 'default' | React.ComponentType<any> | null | Optional alert icon (or other) to show before the title of the Modal Header When the predefined alert types are used the default styling will be automatically applied |
| titleLabel | string | '' | Optional title label text for screen readers |
| variant | 'small' | 'medium' | 'large' | 'default' | 'default' | Variant of the modal |
| width | number | string | -1 | Default width of the content. |
CSS variables
| .pf-c-modal-box | --pf-c-modal-box--BackgroundColor | #fff | ||
| .pf-c-modal-box | --pf-c-modal-box--BoxShadow | 0 1rem 2rem 0 rgba(3, 3, 3, 0.16), 0 0 0.5rem 0 rgba(3, 3, 3, 0.1) | ||
| .pf-c-modal-box | --pf-c-modal-box--ZIndex | 500 | ||
| .pf-c-modal-box | --pf-c-modal-box--Width | 100% | ||
| .pf-c-modal-box | --pf-c-modal-box--MaxWidth | calc(100% - 2rem) | ||
| .pf-c-modal-box | --pf-c-modal-box--m-sm--sm--MaxWidth | 35rem | ||
| .pf-c-modal-box | --pf-c-modal-box--m-md--Width | 52.5rem | ||
| .pf-c-modal-box | --pf-c-modal-box--m-lg--lg--MaxWidth | 70rem | ||
| .pf-c-modal-box | --pf-c-modal-box--MaxHeight | calc(100% - 3rem) | ||
| .pf-c-modal-box | --pf-c-modal-box--m-align-top--spacer | 0.5rem | ||
| .pf-c-modal-box | --pf-c-modal-box--m-align-top--xl--spacer | 2rem | ||
| .pf-c-modal-box | --pf-c-modal-box--m-align-top--MarginTop | 0.5rem | ||
| .pf-c-modal-box | --pf-c-modal-box--m-align-top--MaxHeight | calc(100% - min(0.5rem, 3rem) - 0.5rem) | ||
| .pf-c-modal-box | --pf-c-modal-box--m-align-top--MaxWidth | calc(100% - min(0.5rem * 2, 2rem)) | ||
| .pf-c-modal-box | --pf-c-modal-box--m-danger__title-icon--Color | #c9190b | ||
| .pf-c-modal-box | --pf-c-modal-box--m-warning__title-icon--Color | #f0ab00 | ||
| .pf-c-modal-box | --pf-c-modal-box--m-success__title-icon--Color | #3e8635 | ||
| .pf-c-modal-box | --pf-c-modal-box--m-info__title-icon--Color | #2b9af3 | ||
| .pf-c-modal-box | --pf-c-modal-box--m-default__title-icon--Color | #009596 | ||
| .pf-c-modal-box | --pf-c-modal-box__header--PaddingTop | 1.5rem | ||
| .pf-c-modal-box | --pf-c-modal-box__header--PaddingRight | 1.5rem | ||
| .pf-c-modal-box | --pf-c-modal-box__header--PaddingLeft | 1.5rem | ||
| .pf-c-modal-box | --pf-c-modal-box__header--last-child--PaddingBottom | 1.5rem | ||
| .pf-c-modal-box | --pf-c-modal-box__title--LineHeight | 1.3 | ||
| .pf-c-modal-box | --pf-c-modal-box__title--FontFamily | '"RedHatDisplay", "Overpass", overpass, helvetica, arial, sans-serif' | ||
| .pf-c-modal-box | --pf-c-modal-box__title--FontSize | 1.5rem | ||
| .pf-c-modal-box | --pf-c-modal-box__title-icon--MarginRight | 0.5rem | ||
| .pf-c-modal-box | --pf-c-modal-box__title-icon--Color | #151515 | ||
| .pf-c-modal-box | --pf-c-modal-box__description--PaddingTop | 0.25rem | ||
| .pf-c-modal-box | --pf-c-modal-box__body--MinHeight | calc(1rem * 1.5) | ||
| .pf-c-modal-box | --pf-c-modal-box__body--PaddingTop | 1.5rem | ||
| .pf-c-modal-box | --pf-c-modal-box__body--PaddingRight | 1.5rem | ||
| .pf-c-modal-box | --pf-c-modal-box__body--PaddingLeft | 1.5rem | ||
| .pf-c-modal-box | --pf-c-modal-box__body--last-child--PaddingBottom | 1.5rem | ||
| .pf-c-modal-box | --pf-c-modal-box__header--body--PaddingTop | 1rem | ||
| .pf-c-modal-box | --pf-c-modal-box--c-button--Top | calc(1.5rem) | ||
| .pf-c-modal-box | --pf-c-modal-box--c-button--Right | 1rem | ||
| .pf-c-modal-box | --pf-c-modal-box--c-button--sibling--MarginRight | calc(2rem + 0.5rem) | ||
| .pf-c-modal-box | --pf-c-modal-box__footer--PaddingTop | 1.5rem | ||
| .pf-c-modal-box | --pf-c-modal-box__footer--PaddingRight | 1.5rem | ||
| .pf-c-modal-box | --pf-c-modal-box__footer--PaddingBottom | 1.5rem | ||
| .pf-c-modal-box | --pf-c-modal-box__footer--PaddingLeft | 1.5rem | ||
| .pf-c-modal-box | --pf-c-modal-box__footer--c-button--MarginRight | 1rem | ||
| .pf-c-modal-box | --pf-c-modal-box__footer--c-button--sm--MarginRight | calc(1rem / 2) | ||
| .pf-c-modal-box.pf-m-sm | --pf-c-modal-box--Width | 35rem | ||
| .pf-c-modal-box.pf-m-md | --pf-c-modal-box--Width | 52.5rem | ||
| .pf-c-modal-box.pf-m-lg | --pf-c-modal-box--Width | 70rem | ||
| .pf-c-modal-box.pf-m-danger | --pf-c-modal-box__title-icon--Color | #c9190b | ||
| .pf-c-modal-box.pf-m-warning | --pf-c-modal-box__title-icon--Color | #f0ab00 | ||
| .pf-c-modal-box.pf-m-success | --pf-c-modal-box__title-icon--Color | #3e8635 | ||
| .pf-c-modal-box.pf-m-default | --pf-c-modal-box__title-icon--Color | #009596 | ||
| .pf-c-modal-box.pf-m-info | --pf-c-modal-box__title-icon--Color | #2b9af3 | ||
| .pf-c-modal-box__header + .pf-c-modal-box__body | --pf-c-modal-box__body--PaddingTop | 1rem | ||
View source on GitHub
