Skip to content
Primer Design System

Primer Design System

Dialog

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

On this page

v0.24.0AlphaReviewed for accessibility

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

NameDefaultDescription
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.

NameDefaultDescription
system_arguments

N/A

Hash

The same arguments as Button.

header

Header content.

NameDefaultDescription
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.

NameDefaultDescription
system_arguments

N/A

Hash

System arguments

footer

Footer content.

NameDefaultDescription
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

NameDefaultDescription
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

Slots

filter

Optional filter slot for adding a filter input to the header.

NameDefaultDescription
system_arguments

N/A

Hash

System arguments

subtitle

Optional subtitle slot for adding a subtitle to the header.

NameDefaultDescription
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

NameDefaultDescription
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

NameDefaultDescription
system_arguments

N/A

Hash

System arguments