Dialog

Overview Style Guidelines Code Accessibility

Overview

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

Sample element

Leave page

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

Leave Cancel Open dialog

Demo

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>
  <rh-cta>
    <a href="#bar">Learn more</a>
  </rh-cta>
</rh-dialog>

<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';
</script>

View the 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
© 2021-2024 Red Hat, Inc. Deploys by Netlify
Scroll back to the top