Skip to main content Red Hat Design System logo Contribute on Github


Overview Style Guidelines Code Accessibility


A dialog displays important information to users without requiring them to navigate away from the page.

A dialog container with a black headline, black body text, two blue buttons, and a dark gray close button all on a white background on top of a slightly transparent black background


What do these mean?
Figma library:
RH Elements:

Sample element

Leave page

If you leave the page, any unsaved information will be lost.

Leave Cancel

Open dialog


View a live version of this element to see how it can be customized.

<rh-button id="first-modal-trigger">Open</rh-button>
<rh-dialog trigger="first-modal-trigger">
<h2 slot="header">Modal dialog 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>

<script type="module">
import '@rhds/elements/rh-button/rh-button.js';
import '@rhds/elements/rh-cta/rh-cta.js';
import '@rhds/elements/rh-dialog/rh-dialog.js';

Full screen demo

When to use

  • When you need to confirm user decisions
  • When you need an immediate response from users
  • When you need to notify users of urgent information concerning their current workflow
Property Status Meaning
Figma library Ready Component is available in the Figma library
Responsive Ready Component responds to changing viewport sizes in Figma and the browser
RH Elements Ready Component is available as a web component
webRH Ready Component is available as a web component
© 2021-2024 Red Hat, Inc. Deploys by Netlify