Dialog

Dialog is a component used to confirm or interrupt user actions.

Dialog follows the WAI-ARIA - Dialog (Modal) Pattern for accessibility.

When the dialog opens, focus is automatically set to the first enabled element, or the element from initialFocusRef.
When the dialog closes, focus returns to the element that was focused before the dialog activated, or the element from finalFocusRef.
Clicking on the overlay closes the dialog.
Scrolling is blocked on the elements behind the dialog.

Set aria-haspopup="dialog" on the element that triggers the dialog to inform the user that the dialog will open.

const { isOpen, onOpen, onClose } = useDisclosure()

return (
  <>
    <Button aria-haspopup="dialog" onClick={onOpen}>
      Open Dialog
    </Button>

    <Dialog
      isOpen={isOpen}
      onClose={onClose}
      header="孫悟空"
      cancel="わけない"
      onCancel={onClose}
      success="わける"
      onSuccess={onClose}
    >
      だ…大地よ海よ　そして生きているすべての　みんな…
      このオラにほんのちょっとずつだけ元気をわけてくれ…！！！
    </Dialog>
  </>
)

Copied!

When the dialog opens, focus is trapped within it. That is, you cannot focus on elements outside the dialog unless the dialog is closed.

Key	Description	State
`Tab`	Focuses the next element within the dialog that is not disabled. If it's the last element, focuses the first element within the dialog that is not disabled.	`isOpen={true}`
`Shift` + `Tab`	Focuses the previous element within the dialog that is not disabled. If it's the first element, focuses the last element within the dialog that is not disabled.	`isOpen={true}`
`Escape`	Closes the dialog.	`isOpen={true}` + `closeOnEsc={true}`

ARIA Roles and Attributes

Component	Roles and Attributes	Usage
`Modal`	`role="dialog"`	Indicates that it is a dialog.
	`aria-modal="true"`	Indicates that the displayed widget is a modal.
	`aria-labelledby`	Sets the `id` of the associated `ModalHeader`.
	`aria-describedby`	Sets the `id` of the associated `ModalBody`.
`ModalOverlay`	`aria-hidden="true"`	Excludes the element from the accessibility tree.
`ModalCloseButton`	`aria-label="Close dialog"`	Sets `"Close dialog"` as the label.
`ModalHeader`	`id`	Used to associate with `Modal`.
`ModalBody`	`id`	Used to associate with `Modal`.

Edit this page on GitHub

PreviousModal NextDrawer