Dialog

Importing

Usage

rh-dialog

Importing

Usage

rh-dialog

Importing

Add rh-dialog to your page with this import statement:

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

Copy to Clipboard Wrap lines

To learn more about installing RHDS elements on your site using an import map read our getting started docs.

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

Slots 4

Slot Name	Summary	Description
`header`		The header is an optional slot that appears at the top of the dialog window. It should be a header tag (h2-h6).
`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.
`footer`		Optional footer content. Good place to put action buttons.

Attributes 6

Attribute	DOM Property	Description	Type	Default
`variant`	`variant`	The `variant` controls the width of the dialog. There are three options: `small`, `medium` and `large`. The default is `large`.	`'small' \| 'medium' \| 'large'`	`unknown`
`position`	`position`	`position="top"` aligns the dialog with the top of the page	`'top'`	`unknown`
`accessible-label`	`accessibleLabel`	Use `accessible-label="My custom label"` to specify the dialog's accessible name. Defaults to the name of the dialog trigger if no attribute is set and no headings exist in the modal. See Dialog's Accessibility page for more info.	`string`	`unknown`
`open`	`open`	`open` / `open="open"` declaratively opens the dialog	`boolean`	`false`
`trigger`	`trigger`	Optional ID of the trigger element	`string`	`unknown`
`type`	`type`	Use `type="video"` to embed a video player into a dialog.	`'video'`	`unknown`

Methods 6

Method Name	Description
`cancel(returnValue: string)`
`setTrigger(element: HTMLElement)`
`toggle()`	Manually toggles the dialog. `dialog.toggle();`
`show()`	Manually opens the dialog. `dialog.show();`
`showModal()`
`close(returnValue: string)`	Manually closes the dialog.

Events 3

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 manually closes a dialog.
`cancel`	Fires when a user clicks outside the dialog or hits ESC on their keyboard.

CSS Shadow Parts 7

Part Name	Summary	Description
`dialog`		The dialog element
`close-button`		The dialog's close button
`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
`body`
`footer`		Actions footer container

CSS Custom Properties 2

CSS Property	Description	Default
`--rh-dialog-close-button-color`	Sets the dialog close button color.	`var(--rh-color-surface-lightest, #ffffff)`
`--rh-dialog-video-aspect-ratio`		`16/9`

Design Tokens 20

Token	Copy
`--rh-color-surface-darker`	Full CSS Variable Permalink to this token
`--rh-font-family-body-text`	Full CSS Variable Permalink to this token
`--rh-box-shadow-xl`	Full CSS Variable Permalink to this token
`--rh-color-text-primary`	Full CSS Variable Permalink to this token
`--rh-space-3xl`	Full CSS Variable Permalink to this token
`--rh-font-family-heading`	Full CSS Variable Permalink to this token
`--rh-font-size-heading-sm`	Full CSS Variable Permalink to this token
`--rh-font-weight-body-text-regular`	Full CSS Variable Permalink to this token
`--rh-space-lg`	Full CSS Variable Permalink to this token
`--rh-space-xl`	Full CSS Variable Permalink to this token
`--rh-color-icon-secondary`	Full CSS Variable Permalink to this token
`--rh-color-surface-dark`	Full CSS Variable Permalink to this token
`--rh-border-radius-default`	Full CSS Variable Permalink to this token
`--rh-length-xl`	Full CSS Variable Permalink to this token
`--rh-space-2xl`	Full CSS Variable Permalink to this token
`--rh-color-gray-90`	Full CSS Variable Permalink to this token
`--rh-opacity-60`	Full CSS Variable Permalink to this token
`--rh-space-md`	Full CSS Variable Permalink to this token
`--rh-space-sm`	Full CSS Variable Permalink to this token
`--rh-color-surface-lightest`	Full CSS Variable Permalink to this token

Edit this page on GitHub