Overview
A dialog displays important information to users without requiring them to navigate away from the page.
- Figma library
-
Ready - Responsive
-
Ready - RH Elements
-
Ready - webRH
-
Ready
Sample element
Leave page
If you leave the page, any unsaved information will be lost.
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>
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
Status checklist
| Property | Status | Meaning |
|---|---|---|
| Figma library |
|
Component is available in the Figma library |
| Responsive |
|
Component responds to changing viewport sizes in Figma and the browser |
| RH Elements |
|
Component is available as a web component |
| webRH |
|
Component is available as a web component |
Related elements or patterns
Feedback
To give feedback about anything on this page, contact us.
Red Hat legal and privacy links
- About Red Hat
- Jobs
- Events
- Locations
- Contact Red Hat
- Red Hat Blog
- Diversity, equity, and inclusion
- Cool Stuff Store
- Red Hat Summit
Red Hat legal and privacy links
