Dialog
Dialog is a floating surface used to display transient content such as confirmation actions, selection options, and more.
On this page
Description
A Dialog is used to remove the user from the main application flow,
to confirm actions, ask for disambiguation or to present small forms.
Accessibility
- Dialog Accessible Name: A dialog should have an accessible name,
so screen readers are aware of the purpose of the dialog when it opens.
Give an accessible name setting
:title. The accessible name will be used as the main heading inside the dialog. - Dialog unique id: A dialog should be unique. Give a unique id
setting
:dialog_id. If no:dialog_idis given, a default randomize hex id is generated.
The combination of both :title and :dialog_id establishes an
aria-labelledby relationship between the title and the unique id of
the dialog.
Arguments
| Name | Type | Default | Description |
|---|---|---|---|
id | String |
| The id of the dialog. |
title | String | N/A | Describes the content of the dialog. |
subtitle | String |
| Provides additional context for the dialog, also setting the |
size | Symbol |
| The size of the dialog. One of |
position | Symbol |
| The position of the dialog. One of |
position_narrow | Symbol |
| The position of the dialog when narrow. One of |
visually_hide_title | Boolean |
| If true will hide the heading title, while still making it available to Screen Readers. |
disable_scroll | Boolean |
| When true, disables scrolling the page when the dialog is open. |
system_arguments | Hash | N/A |
Examples
Slots
show_button
Optional button to open the dialog.
| Name | Type | Default | Description |
|---|---|---|---|
system_arguments | Hash | N/A | The same arguments as Button. |
header
Header content.
| Name | Type | Default | Description |
|---|---|---|---|
show_divider | Boolean | N/A | Show a divider between the header and body. |
visually_hide_title | Boolean | N/A | Visually hide the |
system_arguments | Hash | N/A | The arguments accepted by Dialog::Header. |
body
Required body content.
| Name | Type | Default | Description |
|---|---|---|---|
system_arguments | Hash | N/A |
footer
Footer content.
| Name | Type | Default | Description |
|---|---|---|---|
show_divider | Boolean | N/A | Show a divider between the footer and body. |
system_arguments | Hash | N/A |
Methods
id
The dialog's ID value.
Dialog::Header
A Dialog::Header is a compositional component, used to render the
Header of a dialog. See Dialog.
Arguments
| Name | Type | Default | Description |
|---|---|---|---|
id | String | N/A | The HTML element's ID value. |
title | String | N/A | Describes the content of the dialog. |
subtitle | String |
| Provides additional context for the dialog, also setting the |
show_divider | Boolean |
| Show a divider between the header and body. |
visually_hide_title | Boolean |
| Visually hide the |
variant | Symbol |
| One of |
system_arguments | Hash | N/A |
Slots
filter
Optional filter slot for adding a filter input to the header.
| Name | Type | Default | Description |
|---|---|---|---|
system_arguments | Hash | N/A |
subtitle
Optional subtitle slot for adding a subtitle to the header.
| Name | Type | Default | Description |
|---|---|---|---|
system_arguments | Hash | N/A |
Dialog::Body
A Dialog::Body is a compositional component, used to render the
Body of a dialog. See Dialog.
Arguments
| Name | Type | Default | Description |
|---|---|---|---|
system_arguments | Hash | N/A |
Dialog::Footer
A Dialog::Footer is a compositional component, used to render the
Footer of a dialog. See Dialog.
Arguments
| Name | Type | Default | Description |
|---|---|---|---|
show_divider | Boolean |
| Show a divider between the footer and body. |
system_arguments | Hash | N/A |