Dialog

Dialog is a floating surface used to display transient content such as confirmation actions, selection options, and more.

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_id is 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	Default	Description
id	`self.class.generate_id`	`String` The id of the dialog.
title	N/A	`String` Describes the content of the dialog.
subtitle	`nil`	`String` Provides additional context for the dialog, also setting the `aria-describedby` attribute.
size	`:medium`	`Symbol` The size of the dialog. One of `:auto`, `:large`, `:medium`, `:medium_portrait`, `:small`, or `:xlarge`.
position	`:center`	`Symbol` The position of the dialog. One of `:center`, `:left`, or `:right`.
position_narrow	`:inherit`	`Symbol` The position of the dialog when narrow. One of `:bottom`, `:fullscreen`, `:inherit`, `:left`, or `:right`.
visually_hide_title	`false`	`Boolean` If true will hide the heading title, while still making it available to Screen Readers.
system_arguments	N/A	`Hash` System arguments

Examples

Slots

`show_button`

Optional button to open the dialog.

Name	Default	Description
system_arguments	N/A	`Hash` The same arguments as Button.

Header content.

Name	Default	Description
show_divider	N/A	`Boolean` Show a divider between the header and body.
visually_hide_title	N/A	`Boolean` Visually hide the `title` while maintaining a label for assistive technologies.
system_arguments	N/A	`Hash` The arguments accepted by Dialog::Header.

`body`

Required body content.

Name	Default	Description
system_arguments	N/A	`Hash` System arguments

Footer content.

Name	Default	Description
show_divider	N/A	`Boolean` Show a divider between the footer and body.
system_arguments	N/A	`Hash` System arguments

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	Default	Description
id	N/A	`String` The HTML element's ID value.
title	N/A	`String` Describes the content of the dialog.
subtitle	`nil`	`String` Provides additional context for the dialog, also setting the `aria-describedby` attribute.
show_divider	`false`	`Boolean` Show a divider between the header and body.
visually_hide_title	`false`	`Boolean` Visually hide the `title` while maintaining a label for assistive technologies.
variant	`:medium`	`Symbol` One of `:large` or `:medium`.
system_arguments	N/A	`Hash` System arguments

Dialog::Footer

A Dialog::Footer is a compositional component, used to render the Footer of a dialog. See Dialog.

Arguments

Name	Default	Description
show_divider	`false`	`Boolean` Show a divider between the footer and body.
system_arguments	N/A	`Hash` System arguments

Dialog::Body

A Dialog::Body is a compositional component, used to render the Body of a dialog. See Dialog.

Arguments

Name	Default	Description
system_arguments	N/A	`Hash` System arguments

Primer Design System

Site navigation

Dialog

On this page

Description

Accessibility

Arguments

Examples

Slots

`show_button`

`header`

`body`

`footer`

Methods

`id`

Dialog::Header

Arguments

Dialog::Footer

Arguments

Dialog::Body

Arguments