Skip to content
PatternFly

Modal

A modal displays important information to a user without requiring them to navigate to a new page.

Examples

Basic

Basic screenshot

With help button

With help button screenshot

Small

Small screenshot

Medium

Medium screenshot

Large

Large screenshot

Without title

Without title screenshot

With description

With description screenshot

Custom title

Custom title screenshot
Modal box as generic container screenshot

Icon

Icon screenshot

Custom alert

Custom alert screenshot

Info alert

Info alert screenshot

Success alert

Success alert screenshot

Warning alert

Warning alert screenshot

Danger alert

Danger alert screenshot

Danger alert with modifier on modal title

The status modifier classes can be applied directly to the modal title element, instead of the parent modal.

Danger alert with modifier on modal title screenshot

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-v5-c-modal-box container will serve as a generic container with no padding for custom modal content. If no .pf-v5-c-modal-box__title is used, aria-label="[title of modal]" must be provided for .pf-v5-c-modal-box.

Accessibility

Attribute
Applies to
Outcome
role="dialog"
.pf-v5-c-modal-box
Identifies the element that serves as the modal container. Required
aria-labelledby="[id value of .pf-v5-c-modal-box__title or custom modal title]"
.pf-v5-c-modal-box
Gives the modal an accessible name by referring to the element that provides the dialog title. Required when .pf-v5-c-title is present
aria-label="[title of modal]"
.pf-v5-c-modal-box
Gives the modal an accessible name. Required when .pf-v5-c-modal-box__title is not present
aria-describedby="[id value of applicable content]"
.pf-v5-c-modal-box
Gives 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-v5-c-modal-box
Tells assistive technologies that the windows underneath the current modal are not available for interaction. Required
aria-label="Close"
.pf-v5-c-modal-box__close .pf-v5-c-button
Provides 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 open
Hides main contents of the page from screen readers. The element with .pf-v5-c-modal-box must not be a descendent of the element with aria-hidden="true". For more info see trapping focus. Required
form="[id of form in modal body]"
.pf-v5-c-modal-box__footer .pf-v5-c-button
Associates a submit button in the modal footer with a form in the modal body. For use when the submit button is outside of the <form> that the button submits.
tabindex="0"
.pf-v5-c-modal-box__body
If a modal box body has overflow content that triggers a scrollbar, to ensure that the content is keyboard accessible, the body must include either a focusable element within the scrollable region or the body itself must be focusable by adding tabindex="0".

Usage

Class
Applied
Outcome
.pf-v5-c-modal-box
<div>
Initiates a modal box. Required
.pf-v5-c-modal-box__close
<div>
Creates a container for the modal box close button. Required if there is a close button.
.pf-v5-c-button.pf-m-plain
<button>
Initiates a modal box close button.
.pf-v5-c-modal-box__header
<header>
Initiates a modal box header. Required if using a .pf-v5-c-modal-box__title.
.pf-v5-c-modal-box__header-main
<div>
Initiates a modal box header main container. Required when pf-v5-c-modal-box__header-help is used.
.pf-v5-c-modal-box__header-help
<div>
Initiates the help button container in the modal box header actions.
.pf-v5-c-modal-box__title
<h1>,<h2>,<h3>,<h4>,<h5>,<h6>, <div>
Initiates a modal box title. Required if using a modal description.
.pf-v5-c-modal-box__title-icon
<span>
Initiates a container for the modal box title icon.
.pf-v5-c-modal-box__title-text
<span>
Initiates a container for the modal box title text.
.pf-v5-c-modal-box__description
<div>
Initiates a modal box description.
.pf-v5-c-modal-box__body
<div>
Initiates a modal box body.
.pf-v5-c-modal-box__footer
<footer>
Initiates a modal box footer.
.pf-m-sm
.pf-v5-c-modal-box
Modifies for a small modal box width.
.pf-m-md
.pf-v5-c-modal-box
Modifies for a medium modal box width.
.pf-m-lg
.pf-v5-c-modal-box
Modifies for a large modal box width.
.pf-m-align-top
.pf-v5-c-modal-box
Modifies for top alignment.
.pf-m-icon
.pf-v5-c-modal-box__title
Modifies the title layout to accommodate an icon.
.pf-m-custom
.pf-v5-c-modal-box, .pf-v5-c-modal-box__title
Modifies for the custom alert state.
.pf-m-info
.pf-v5-c-modal-box, .pf-v5-c-modal-box__title
Modifies for the info alert state.
.pf-m-success
.pf-v5-c-modal-box, .pf-v5-c-modal-box__title
Modifies for the success alert state.
.pf-m-warning
.pf-v5-c-modal-box, .pf-v5-c-modal-box__title
Modifies for the warning alert state.
.pf-m-danger
.pf-v5-c-modal-box, .pf-v5-c-modal-box__title
Modifies for the danger alert state.
.pf-m-help
.pf-v5-c-modal-box__header
Modifies the modal box header to support the help action

CSS variables

Expand or collapse columnSelectorVariableValue
.pf-v5-c-modal-box--pf-v5-c-modal-box--BackgroundColor
#fff
.pf-v5-c-modal-box--pf-v5-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-v5-c-modal-box--pf-v5-c-modal-box--ZIndex
500
.pf-v5-c-modal-box--pf-v5-c-modal-box--Width
100%
.pf-v5-c-modal-box--pf-v5-c-modal-box--MaxWidth
calc(100% - 2rem)
.pf-v5-c-modal-box--pf-v5-c-modal-box--m-sm--sm--MaxWidth
35rem
.pf-v5-c-modal-box--pf-v5-c-modal-box--m-md--Width
52.5rem
.pf-v5-c-modal-box--pf-v5-c-modal-box--m-lg--lg--MaxWidth
70rem
.pf-v5-c-modal-box--pf-v5-c-modal-box--MaxHeight
calc(100% - 3rem)
.pf-v5-c-modal-box--pf-v5-c-modal-box--m-align-top--spacer
0.5rem
.pf-v5-c-modal-box--pf-v5-c-modal-box--m-align-top--xl--spacer
2rem
.pf-v5-c-modal-box--pf-v5-c-modal-box--m-align-top--MarginTop
0.5rem
.pf-v5-c-modal-box--pf-v5-c-modal-box--m-align-top--MaxHeight
calc(100% - min(0.5rem, 3rem) - 0.5rem)
.pf-v5-c-modal-box--pf-v5-c-modal-box--m-align-top--MaxWidth
calc(100% - min(0.5rem * 2, 2rem))
.pf-v5-c-modal-box--pf-v5-c-modal-box--m-danger__title-icon--Color
#c9190b
.pf-v5-c-modal-box--pf-v5-c-modal-box--m-warning__title-icon--Color
#f0ab00
.pf-v5-c-modal-box--pf-v5-c-modal-box--m-success__title-icon--Color
#3e8635
.pf-v5-c-modal-box--pf-v5-c-modal-box--m-info__title-icon--Color
#2b9af3
.pf-v5-c-modal-box--pf-v5-c-modal-box--m-custom__title-icon--Color
#009596
.pf-v5-c-modal-box--pf-v5-c-modal-box__header--PaddingTop
1.5rem
.pf-v5-c-modal-box--pf-v5-c-modal-box__header--PaddingRight
1.5rem
.pf-v5-c-modal-box--pf-v5-c-modal-box__header--PaddingLeft
1.5rem
.pf-v5-c-modal-box--pf-v5-c-modal-box__header--last-child--PaddingBottom
1.5rem
.pf-v5-c-modal-box--pf-v5-c-modal-box__title--LineHeight
1.3
.pf-v5-c-modal-box--pf-v5-c-modal-box__title--FontFamily
'"RedHatDisplay", helvetica, arial, sans-serif'
.pf-v5-c-modal-box--pf-v5-c-modal-box__title--FontSize
1.5rem
.pf-v5-c-modal-box--pf-v5-c-modal-box__title-icon--MarginRight
0.5rem
.pf-v5-c-modal-box--pf-v5-c-modal-box__title-icon--Color
#151515
.pf-v5-c-modal-box--pf-v5-c-modal-box__description--PaddingTop
0.25rem
.pf-v5-c-modal-box--pf-v5-c-modal-box__body--MinHeight
calc(1rem * 1.5)
.pf-v5-c-modal-box--pf-v5-c-modal-box__body--PaddingTop
1.5rem
.pf-v5-c-modal-box--pf-v5-c-modal-box__body--PaddingRight
1.5rem
.pf-v5-c-modal-box--pf-v5-c-modal-box__body--PaddingLeft
1.5rem
.pf-v5-c-modal-box--pf-v5-c-modal-box__body--last-child--PaddingBottom
1.5rem
.pf-v5-c-modal-box--pf-v5-c-modal-box__header--body--PaddingTop
1rem
.pf-v5-c-modal-box--pf-v5-c-modal-box__close--Top
calc(1.5rem)
.pf-v5-c-modal-box--pf-v5-c-modal-box__close--Right
1rem
.pf-v5-c-modal-box--pf-v5-c-modal-box__close--sibling--MarginRight
calc(2rem + 0.5rem)
.pf-v5-c-modal-box--pf-v5-c-modal-box__footer--PaddingTop
1.5rem
.pf-v5-c-modal-box--pf-v5-c-modal-box__footer--PaddingRight
1.5rem
.pf-v5-c-modal-box--pf-v5-c-modal-box__footer--PaddingBottom
1.5rem
.pf-v5-c-modal-box--pf-v5-c-modal-box__footer--PaddingLeft
1.5rem
.pf-v5-c-modal-box--pf-v5-c-modal-box__footer--c-button--MarginRight
1rem
.pf-v5-c-modal-box--pf-v5-c-modal-box__footer--c-button--sm--MarginRight
calc(1rem / 2)
.pf-v5-c-modal-box.pf-m-sm--pf-v5-c-modal-box--Width
35rem
.pf-v5-c-modal-box.pf-m-md--pf-v5-c-modal-box--Width
52.5rem
.pf-v5-c-modal-box.pf-m-lg--pf-v5-c-modal-box--Width
70rem
.pf-v5-c-modal-box__title.pf-m-danger--pf-v5-c-modal-box__title-icon--Color
#c9190b
.pf-v5-c-modal-box__title.pf-m-warning--pf-v5-c-modal-box__title-icon--Color
#f0ab00
.pf-v5-c-modal-box__title.pf-m-success--pf-v5-c-modal-box__title-icon--Color
#3e8635
.pf-v5-c-modal-box__title.pf-m-custom--pf-v5-c-modal-box__title-icon--Color
#009596
.pf-v5-c-modal-box__title.pf-m-info--pf-v5-c-modal-box__title-icon--Color
#2b9af3
.pf-v5-c-modal-box__header + .pf-v5-c-modal-box__body--pf-v5-c-modal-box__body--PaddingTop
1rem

View source on GitHub
Red Hat
Copyright © 2014-2024 Red Hat, Inc.
Privacy statementTerms of useAll policies and guidelines