Dialog

Use GdsDialog when the user must acknowledge something important or make a decision before continuing. A dialog blocks the rest of the app until it is dismissed - use it sparingly.

For inline status messages that do not block the page, use Alert instead.

Composition

Dialogs are built from a small set of related components:

Accessibility

• Wire aria-labelledby to the title id and aria-describedby to the body text id
• Keep the destructive or primary action in GdsDialogActions, not only in the body
• Escape and backdrop click call onClose by default - handle that to close the dialog

<GdsDialog
  open={open}
  onClose={handleClose}
  aria-labelledby="delete-dialog-title"
  aria-describedby="delete-dialog-description"
>
  <GdsDialogTitle id="delete-dialog-title">Delete project?</GdsDialogTitle>
  <GdsDialogContent>
    <GdsDialogContentText id="delete-dialog-description">
      This permanently deletes the project and all of its data.
    </GdsDialogContentText>
  </GdsDialogContent>
</GdsDialog>

Default

A basic confirmation dialog. Manage open in local state and pass onClose so Escape and backdrop click dismiss it.

Destructive

For irreversible actions, use color="error" on the confirm button and wire aria-labelledby / aria-describedby on GdsDialog so screen readers announce the title and description.

Sizes

Set fullWidth and maxWidth on GdsDialog to control width. Default is sm. Use xs for compact confirmations; use md through xl when the body needs more room.

Form

Put form fields inside GdsDialogContent. Use autoFocus on the first field and keep primary actions in GdsDialogActions.

Customization

Here is an example of customizing the component. You can learn more about this in the overrides documentation.

The dialog has a close button added to aid usability.

Props