Skip to Content
Patternfly Logo

Modal box

Modals load and display important information without navigating away from the current page. The user cannot perform other actions until the modal is dismissed. Related design guidelines: Modal

ExamplesDocumentationCSS Variables

Examples

Basic

Small

Medium

Large

Without title

With description

Custom title

Documentation

Overview

A modal box is a generic rectangular container that can be used to build modals. A modal box can have the following sections: header, title, description, body, and footer. With normal use of the modal, a title or body is required. Alternatively, no child elements can be used, and the .pf-c-modal-box container will serve as a generic container with no padding for custom modal content. If no .pf-c-modal-box__title is used, aria-label="[title of modal]" must be provided for .pf-c-modal-box.

Accessibility

AttributeApplies toOutcome
role="dialog".pf-c-modal-boxIdentifies the element that serves as the modal container. Required
aria-labelledby="[id value of .pf-c-modal-box__title or custom modal title]".pf-c-modal-boxGives the modal an accessible name by referring to the element that provides the dialog title. Required when .pf-c-title is present
aria-label="[title of modal]".pf-c-modal-boxGives the modal an accessible name. Required when .pf-c-modal-box__title is not present
aria-describedby="[id value of applicable content]".pf-c-modal-boxGives the modal an accessible description by referring to the modal content that describes the primary message or purpose of the dialog. Not used if there is no static text that describes the modal.
aria-modal="true".pf-c-modal-boxTells assistive technologies that the windows underneath the current modal are not available for interaction. Required
aria-label="Close".pf-c-modal-box__close .pf-c-buttonProvides an accessible name for the close button as it uses an icon instead of text. Required
aria-hidden="true"Parent element containing the page contents when modal is openHides main contents of the page from screen readers. The element with .pf-c-modal-box must not be a descendent of the element with aria-hidden="true". For more info see trapping focus. Required

Usage

ClassAppliedOutcome
.pf-c-modal-box<div>Initiates a modal box. Required
.pf-c-button.pf-m-plain<button>Initiates a modal box close button.
.pf-c-modal-box__header<header>Initiates a modal box header. Required if using a .pf-c-modal-box__title.
.pf-c-modal-box__title<h1>,<h2>,<h3>,<h4>,<h5>,<h6>, <div>Initiates a modal box title.
.pf-c-modal-box__description<div>Initiates a modal box description. A modal title is required if using a modal description.
.pf-c-modal-box__body<div>Initiates a modal box body.
.pf-c-modal-box__footer<footer>Initiates a modal box footer.
.pf-m-sm.pf-c-modal-boxModifies for a small modal box width.
.pf-m-md.pf-c-modal-boxModifies for a medium modal box width.
.pf-m-lg.pf-c-modal-boxModifies for a large modal box width.

CSS Variables

.pf-c-modal-box--pf-c-modal-box--BackgroundColorc_modal_box_BackgroundColor
#fff
.pf-c-modal-box--pf-c-modal-box--BoxShadowc_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--ZIndexc_modal_box_ZIndex
500
.pf-c-modal-box--pf-c-modal-box--Widthc_modal_box_Width
100%
.pf-c-modal-box--pf-c-modal-box--MaxWidthc_modal_box_MaxWidth
calc(100% - 2rem)
.pf-c-modal-box--pf-c-modal-box--m-sm--sm--MaxWidthc_modal_box_m_sm_sm_MaxWidth
35rem
.pf-c-modal-box--pf-c-modal-box--m-md--Widthc_modal_box_m_md_Width
52.5rem
.pf-c-modal-box--pf-c-modal-box--m-lg--lg--MaxWidthc_modal_box_m_lg_lg_MaxWidth
70rem
.pf-c-modal-box--pf-c-modal-box--MaxHeightc_modal_box_MaxHeight
calc(100% - 3rem)
.pf-c-modal-box--pf-c-modal-box__header--PaddingTopc_modal_box__header_PaddingTop
1.5rem
.pf-c-modal-box--pf-c-modal-box__header--PaddingRightc_modal_box__header_PaddingRight
1.5rem
.pf-c-modal-box--pf-c-modal-box__header--PaddingLeftc_modal_box__header_PaddingLeft
1.5rem
.pf-c-modal-box--pf-c-modal-box__header--last-child--PaddingBottomc_modal_box__header_last_child_PaddingBottom
1.5rem
.pf-c-modal-box--pf-c-modal-box__title--LineHeightc_modal_box__title_LineHeight
1.3
.pf-c-modal-box--pf-c-modal-box__title--FontFamilyc_modal_box__title_FontFamily
"RedHatDisplay", "Overpass", overpass, helvetica, arial, sans-serif
.pf-c-modal-box--pf-c-modal-box__title--FontSizec_modal_box__title_FontSize
1.5rem
.pf-c-modal-box--pf-c-modal-box__description--PaddingTopc_modal_box__description_PaddingTop
0.25rem
.pf-c-modal-box--pf-c-modal-box__body--MinHeightc_modal_box__body_MinHeight
calc(1rem * 1.5)
.pf-c-modal-box--pf-c-modal-box__body--PaddingTopc_modal_box__body_PaddingTop
1.5rem
.pf-c-modal-box--pf-c-modal-box__body--PaddingRightc_modal_box__body_PaddingRight
1.5rem
.pf-c-modal-box--pf-c-modal-box__body--PaddingLeftc_modal_box__body_PaddingLeft
1.5rem
.pf-c-modal-box--pf-c-modal-box__body--last-child--PaddingBottomc_modal_box__body_last_child_PaddingBottom
1.5rem
.pf-c-modal-box--pf-c-modal-box__header--body--PaddingTopc_modal_box__header_body_PaddingTop
1rem
.pf-c-modal-box--pf-c-modal-box--c-button--Topc_modal_box_c_button_Top
calc(1.5rem - 0.375rem + 0.0625rem)
.pf-c-modal-box--pf-c-modal-box--c-button--Rightc_modal_box_c_button_Right
1rem
.pf-c-modal-box--pf-c-modal-box--c-button--sibling--MarginRightc_modal_box_c_button_sibling_MarginRight
2rem
.pf-c-modal-box--pf-c-modal-box__footer--PaddingTopc_modal_box__footer_PaddingTop
1.5rem
.pf-c-modal-box--pf-c-modal-box__footer--PaddingRightc_modal_box__footer_PaddingRight
1.5rem
.pf-c-modal-box--pf-c-modal-box__footer--PaddingBottomc_modal_box__footer_PaddingBottom
1.5rem
.pf-c-modal-box--pf-c-modal-box__footer--PaddingLeftc_modal_box__footer_PaddingLeft
1.5rem
.pf-c-modal-box--pf-c-modal-box__footer--c-button--MarginRightc_modal_box__footer_c_button_MarginRight
1rem
.pf-c-modal-box--pf-c-modal-box__footer--c-button--sm--MarginRightc_modal_box__footer_c_button_sm_MarginRight
calc(1rem / 2)
.pf-c-modal-box.pf-m-sm--pf-c-modal-box--Widthc_modal_box_Width
35rem
.pf-c-modal-box.pf-m-md--pf-c-modal-box--Widthc_modal_box_Width
52.5rem
.pf-c-modal-box.pf-m-lg--pf-c-modal-box--Widthc_modal_box_Width
70rem
.pf-c-modal-box__header + .pf-c-modal-box__body--pf-c-modal-box__body--PaddingTopc_modal_box__body_PaddingTop
1rem