Skip to main contentPrimer

Dialog

readyReviewed for a11y
Lookbook|Source
This page may be removed. Primer plans to move all Rails component documentation to Lookbook.

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

NameRequiredDescription
id
String

The id of the dialog.

title
String

Describes the content of the dialog.

subtitle
String

Provides additional context for the dialog, also setting the aria-describedby attribute.

size
Symbol

The size of the dialog. One of :auto, :large, :medium, :medium_portrait, :small, or :xlarge.

position
Symbol

The position of the dialog. One of :center, :left, or :right.

position_narrow
Symbol

The position of the dialog when narrow. One of :bottom, :fullscreen, :inherit, :left, or :right.

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

Slots

show_button

Optional button to open the dialog.

NameRequiredDescription
system_arguments
Hash

The same arguments as Primer::Beta::Button.

header

Header content.

NameRequiredDescription
show_divider
Boolean

Show a divider between the header and body.

visually_hide_title
Boolean

Visually hide the title while maintaining a label for assistive technologies.

system_arguments
Hash

The arguments accepted by Primer::Alpha::Dialog::Header.

body

Required body content.

NameRequiredDescription
system_arguments
Hash

footer

Footer content.

NameRequiredDescription
show_divider
Boolean

Show a divider between the footer and body.

system_arguments
Hash

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 Primer::Alpha::Dialog.

Arguments

NameRequiredDescription
id
String

The HTML element's ID value.

title
String

Describes the content of the dialog.

subtitle
String

Provides additional context for the dialog, also setting the aria-describedby attribute.

show_divider
Boolean

Show a divider between the header and body.

visually_hide_title
Boolean

Visually hide the title while maintaining a label for assistive technologies.

variant
Symbol

One of :large or :medium.

system_arguments
Hash

Slots

filter

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

NameRequiredDescription
system_arguments
Hash

subtitle

Optional subtitle slot for adding a subtitle to the header.

NameRequiredDescription
system_arguments
Hash

Dialog::Body

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

Arguments

NameRequiredDescription
system_arguments
Hash

Dialog::Footer

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

Arguments

NameRequiredDescription
show_divider
Boolean

Show a divider between the footer and body.

system_arguments
Hash