Dialog
On this page
Installation
We recommend import maps when building pages with RHDS. Learn more about how to install on our getting started docs.
<script type="importmap">
{
"imports": {
"@rhds/elements/": "https://www.redhatstatic.com/dx/v1-alpha/@rhds/elements@2.1.1/elements/",
}
}
</script>
Copy to Clipboard
Copied!
Wrap lines
Overflow lines
npm install @rhds/elements
Copy to Clipboard
Copied!
Wrap lines
Overflow lines
<script type="importmap">
{
"imports": {
"@rhds/elements/rh-dialog/rh-dialog.js": "https://ga.jspm.io/npm:@rhds/elements@2.1.1/rh-dialog/rh-dialog.js"
},
"scopes": {
"https://ga.jspm.io/": {
"@floating-ui/core": "https://ga.jspm.io/npm:@floating-ui/core@1.6.8/dist/floating-ui.core.mjs",
"@floating-ui/dom": "https://ga.jspm.io/npm:@floating-ui/dom@1.6.12/dist/floating-ui.dom.mjs",
"@floating-ui/utils": "https://ga.jspm.io/npm:@floating-ui/utils@0.2.8/dist/floating-ui.utils.mjs",
"@floating-ui/utils/dom": "https://ga.jspm.io/npm:@floating-ui/utils@0.2.8/dist/floating-ui.utils.dom.mjs",
"@lit/context": "https://ga.jspm.io/npm:@lit/context@1.1.3/development/index.js",
"@lit/reactive-element": "https://ga.jspm.io/npm:@lit/reactive-element@2.0.4/development/reactive-element.js",
"@lit/reactive-element/decorators/": "https://ga.jspm.io/npm:@lit/reactive-element@2.0.4/development/decorators/",
"@patternfly/pfe-core": "https://ga.jspm.io/npm:@patternfly/pfe-core@4.0.4/core.js",
"@patternfly/pfe-core/": "https://ga.jspm.io/npm:@patternfly/pfe-core@4.0.4/",
"@patternfly/pfe-core/ssr-shims.js": "https://ga.jspm.io/npm:@patternfly/pfe-core@4.0.4/core.js",
"@rhds/elements/lib/": "https://ga.jspm.io/npm:@rhds/elements@2.1.1/lib/",
"@rhds/elements/": "https://ga.jspm.io/npm:@rhds/elements@2.1.1/elements/",
"@rhds/icons": "https://ga.jspm.io/npm:@rhds/icons@1.1.2/icons.js",
"@rhds/icons/ui/": "https://ga.jspm.io/npm:@rhds/icons@1.1.2/ui/",
"@rhds/tokens/css/": "https://ga.jspm.io/npm:@rhds/tokens@2.1.1/css/",
"@rhds/tokens/media.js": "https://ga.jspm.io/npm:@rhds/tokens@2.1.1/js/media.js",
"lit": "https://ga.jspm.io/npm:lit@3.2.1/index.js",
"lit-element/lit-element.js": "https://ga.jspm.io/npm:lit-element@4.1.1/development/lit-element.js",
"lit-html": "https://ga.jspm.io/npm:lit-html@3.2.1/development/lit-html.js",
"lit-html/": "https://ga.jspm.io/npm:lit-html@3.2.1/development/",
"lit/": "https://ga.jspm.io/npm:lit@3.2.1/",
"prism-esm": "https://ga.jspm.io/npm:prism-esm@1.29.0-fix.6/prism.js",
"prism-esm/components/": "https://ga.jspm.io/npm:prism-esm@1.29.0-fix.6/components/",
"tslib": "https://ga.jspm.io/npm:tslib@2.8.1/tslib.es6.mjs"
}
}
}
</script>
Copy to Clipboard
Copied!
Wrap lines
Overflow lines
Add it to your page with this import statement
<script type="module">
import '@rhds/elements/rh-dialog/rh-dialog.js';
</script>
Copy to Clipboard
Copied!
Wrap lines
Overflow lines
Usage
<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>
Copy to Clipboard
Copied!
Wrap lines
Overflow lines
rh-dialog
A dialog displays important information to users without requiring them to navigate away from the page.
Slot Name | Description |
---|---|
|
The default slot can contain any type of content. When the header is not present this unnamed slot appear at the top of the dialog window (to the left of the close button). Otherwise it will appear beneath the header. |
header |
The header is an optional slot that appears at the top of the dialog window. It should be a header tag (h2-h6). |
footer |
Optional footer content. Good place to put action buttons. |
Attribute | DOM Property | Description | Type | Default |
---|---|---|---|---|
variant |
variant |
The |
|
|
position |
position |
|
|
|
open |
open |
|
|
|
trigger |
trigger |
Optional ID of the trigger element |
|
|
type |
type |
|
|
Method Name | Description |
---|---|
setTrigger(element: HTMLElement) |
|
toggle() |
Manually toggles the dialog.
|
show() |
Manually opens the dialog.
|
showModal() |
|
close(returnValue: string) |
Manually closes the dialog. |
Event Name | Description |
---|---|
open |
Fires when a user clicks on the trigger or manually opens a dialog. |
close |
Fires when either a user clicks on either the close button or the overlay or manually closes a dialog. |
cancel |
Part Name | Description |
---|---|
overlay |
The dialog overlay which lies under the dialog and above the page body |
dialog |
The dialog element |
content |
The container for the dialog content |
header |
The container for the optional dialog header |
description |
The container for the optional dialog description in the header |
close-button |
The dialog's close button |
footer |
Actions footer container |
CSS Property | Description | Default |
---|---|---|
--rh-dialog-video-aspect-ratio |
—
|
|
--rh-dialog-close-button-color |
Sets the dialog close button color. |
var(--rh-color-icon-secondary-on-dark, #ffffff)
|
Token | Copy |
---|---|
--rh-border-radius-default
|
|
--rh-color-gray-90-rgb
|
|
--rh-color-icon-secondary-on-dark
|
|
--rh-color-icon-secondary-on-light
|
|
--rh-color-icon-subtle
|
|
--rh-color-surface-lightest
|
|
--rh-color-text-primary-on-light
|
|
--rh-font-size-heading-sm
|
|
--rh-font-weight-body-text-regular
|
|
--rh-opacity-60
|
|
--rh-space-2xl
|
|
--rh-space-3xl
|
|
--rh-space-lg
|
|
--rh-space-md
|
|
--rh-space-sm
|
|
--rh-space-xl
|
|
Other libraries
To learn more about our other libraries, visit this page.
Feedback
To give feedback about anything on this page, contact us.