Skip to content
PatternFly.org Contribute on Github
PatternFly Elements
Versions v4 v3 v2 v1

Modal

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

Installation

We recommend loading elements via a CDN such as JSPM and using an import map to manage your dependencies.

For more information on import maps and how to use them, see the import map reference on MDN Web Docs.

If you are using node and NPM, you can install this component using npm:

npm install @patternfly/elements

Then import this component into your project by using a bare module specifier:

import '@patternfly/elements/pf-modal/pf-modal.js';

Please Note You should either load elements via a CDN or install them locally through NPM. Do not do both.

Overview

Modal with a header

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Learn more Open modal

Installation

npm install @patternfly/elements

Usage

Modal with a header

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Learn more Open modal
View HTML Source 
<pf-modal trigger="usage-trigger">
  <h2 slot="header">Modal with a header</h2>
  <p>Lorem ipsum dolor sit amet, <a href="#foo">consectetur adipisicing</a> elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <a href="#bar">Learn more</a>
</pf-modal>
<pf-button id="usage-trigger">Open modal</pf-button>

Slots

header

The header is an optional slot that appears at the top of the modal window. It should be a heading tag (h2-h6).

description
Default Slot

The default slot can contain any type of content. When the header is not present, this unnamed slot appear at the top of the modal window (to the left of the close button). Otherwise it will appear beneath the header.

footer

Attributes

Small modal with a header

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Learn more Open a small modal
View HTML Source 
<pf-modal variant="small" trigger="rendered-slot-small">
  <h2 slot="header">Small modal with a header</h2>
  <p>Lorem ipsum dolor sit amet, <a href="#foo">consectetur adipisicing</a> elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <a href="#bar">Learn more</a>
</pf-modal>
<pf-button id="rendered-slot-small"> Open a small modal </pf-button>

Medium modal with a header

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Learn more Open a medium modal
View HTML Source 
<pf-modal variant="medium" trigger="rendered-slot-medium">
  <h2 slot="header">Medium modal with a header</h2>
  <p>Lorem ipsum dolor sit amet, <a href="#foo">consectetur adipisicing</a> elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <a href="#bar">Learn more</a>
</pf-modal>
<pf-button id="rendered-slot-medium"> Open a medium modal </pf-button>

Large modal with a header

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Learn more Open a large modal
View HTML Source 
<pf-modal variant="large" trigger="rendered-slot-large">
  <h2 slot="header">Large modal with a header</h2>
  <p>Lorem ipsum dolor sit amet, <a href="#foo">consectetur adipisicing</a> elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <a href="#bar">Learn more</a>
</pf-modal>
<pf-button id="rendered-slot-large"> Open a large modal </pf-button>
variant

The variant controls the width of the modal. There are three options: small, medium and large. The default is large.

DOM Property
variant
Type
'small' | 'medium' | 'large'
Default
unknown
position

position="top" aligns the dialog with the top of the page

DOM Property
position
Type
'top'
Default
unknown
open
DOM Property
open
Type
boolean
Default
false
trigger

Optional ID of the trigger element

DOM Property
trigger
Type
string
Default
unknown

DOM Properties

returnValue
Type
string
Default
''

Methods

setTrigger(element: HTMLElement)
toggle()

Manually toggles the modal.

modal.toggle();
show()

Manually opens the modal.

modal.open();
showModal()
close(returnValue: string)

Manually closes the modal.

modal.close();

Events

open

Fires when a user clicks on the trigger or manually opens a modal.

Event Type: 
ModalOpenEvent
close

Fires when either a user clicks on either the close button or the overlay or manually closes a modal.

Event Type: 
ModalCloseEvent

CSS Custom Properties

CSS Property Description Default
--pf-global--spacer--sm 0.5rem
--pf-c-modal-box--ZIndex

Z-index for modal box

 var(--pf-global--ZIndex--xl, 500)
--pf-global--ZIndex--xl 500
--pf-c-backdrop--BackgroundColor var(--pf-global--BackgroundColor--dark-transparent-100, rgba(3, 3, 3, 0.62))
--pf-global--BackgroundColor--dark-transparent-100 rgba(3, 3, 3, 0.62)
--pf-c-modal-box--Width

Width of modal

 calc(100% - var(--pf-global--spacer--xl,2rem))
--pf-c-modal-box--MaxWidth

Max width of modal

 calc(100% - var(--pf-global--spacer--xl,2rem))
--pf-c-modal-box--BoxShadow

Box shadow for modal

 var(--pf-global--BoxShadow--xl, 0 1rem 2rem 0 rgba(3, 3, 3, 0.16), 0 0 0.5rem 0 rgba(3, 3, 3, 0.1))
--pf-global--BoxShadow--xl 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--m-sm--sm--MaxWidth 35rem
--pf-c-modal-box--m-md--Width 52.5rem
--pf-c-modal-box--m-lg--lg--MaxWidth 70rem
--pf-c-modal-box--MaxHeight

Max height of modal

 calc(100vh - var(--pf-global--spacer--2xl, 3rem))
--pf-global--spacer--2xl 3rem
--pf-c-modal-box--BackgroundColor

Background color for modal

 var(--pf-global--BackgroundColor--100, var(--pf-global--BackgroundColor--100, #fff))
--pf-global--BackgroundColor--100 #fff
--pf-c-modal-box__title--FontSize

Font size for modal title

 var(--pf-global--FontSize--2xl, 1.5rem)
--pf-global--FontSize--2xl 1.5rem
--pf-global--FontWeight--normal 400
--pf-c-modal-box__title--FontFamily

Font family for modal title

 var(--pf-global--FontFamily--heading--sans-serif, var(--pf-global--FontFamily--redhat-updated--heading--sans-serif, "RedHatDisplayUpdated", "Overpass", overpass, helvetica, arial, sans-serif))
--pf-global--FontFamily--heading--sans-serif var(--pf-global--FontFamily--redhat-updated--heading--sans-serif, "RedHatDisplayUpdated", "Overpass", overpass, helvetica, arial, sans-serif)
--pf-global--FontFamily--redhat-updated--heading--sans-serif "RedHatDisplayUpdated", "Overpass", overpass, helvetica, arial, sans-serif
--pf-c-button--PaddingTop var(--pf-global--spacer--form-element, 0.375rem)
--pf-global--spacer--form-element 0.375rem
--pf-c-button--PaddingRight var(--pf-global--spacer--md, 1rem)
--pf-global--spacer--lg 1.5rem
--pf-c-button--m-plain--Color var(--pf-global--Color--200, #6a6e73)
--pf-global--Color--200 #6a6e73
--pf-c-button--FontSize var(--pf-global--FontSize--md, 1rem)
--pf-global--FontSize--md 1rem
--pf-c-button--m-plain--focus--Color var(--pf-global--Color--100, #151515)
--pf-global--Color--100 #151515
--pf-c-modal-box--m-align-top--MarginTop var(--pf-c-modal-box--m-align-top--spacer, 2rem)
--pf-global--spacer--md 1rem
--pf-c-modal-box--m-align-top--MaxWidth calc(100% - min( var(--pf-c-modal-box--m-align-top--spacer, 2rem) * 2, var(--pf-global--spacer--xl, 2rem)))
--pf-c-modal-box--m-align-top--spacer 2rem
--pf-c-modal-box--m-align-top--MaxHeight calc(100% - var(--_height-offset) - var(--_spacer-align-top))
--pf-global--spacer--xl 0.5rem

CSS Shadow Parts

overlay
dialog
content
header
description
footer
close-button
© 2018-2025 Red Hat, Inc. Deploys by Netlify