Dialog

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

  • @primer/react@36.27.0
  • Alpha
  • Not reviewed for accessibility

Import

import {Dialog} from '@primer/react'

Examples

View in Storybook

Props

Dialog

NameDefaultDescription
isOpen
boolean

Whether or not the dialog is open

onDismiss
() => void

Function that will be called when the dialog is closed

returnFocusRef
React.RefObject<HTMLElement>

The element to restore focus back to after the Dialog is closed

initialFocusRef
React.RefObject<HTMLElement>

Element inside of the Dialog you'd like to be focused when the Dialog is opened. If nothing is passed to initialFocusRef the close button is focused.

aria-labelledby
string

Pass an id to use for the aria-label. Use either a aria-label or an aria-labelledby but not both.

aria-label
string

Pass a label to be used to describe the Dialog. Use either a aria-label or an aria-labelledby but not both.

sx
SystemStyleObject

Dialog.Header

NameDefaultDescription
sx
SystemStyleObject
Navigated to Dialog