Alert Dialog

AlertDialog component is used to interrupt the user with a mandatory confirmation or action.

Import#

Nature UI exports 7 alert dialog related components.

  • AlertDialog: provides context and state for the dialog.
  • AlertDialogHeader: should contain the title announced by screen readers.
  • AlertDialogBody: should contain the description announced by screen readers.
  • AlertDialogFooter: should contain the actions of the dialog.
  • AlertDialogOverlay: The dimmed overlay behind the dialog.
  • AlertDialogContent: The wrapper for the alert dialog's content.
  • AlertDialogCloseButton: The button that closes the dialog.
import {
AlertDialog,
AlertDialogBody,
AlertDialogFooter,
AlertDialogHeader,
AlertDialogContent,
AlertDialogOverlay,
} from '@nature-ui/core';

Usage#

AlertDialog requires that you provide the leastDestructiveRef prop.

Based on WAI-ARIA specifications, focus should be placed on the least destructive element when the dialog opens, to prevent users from accidentally confirming the destructive action.

Editable Example

Background blur#

Set the variant prop to normal to remove the background blur.

<AlertDialog variant='normal'>
No background blur effect
<>...</>
</AlertDialog>

Changing the transition#

The Modal comes with a scale transition by default but you can change it by passing a motionPreset prop, and set its value to either slideInBottom, slideInRight, or scale.

Editable Example

Accessibility#

  • AlertDialog has role alertdialog, and aria-modal set to true.
  • When the dialog opens, focus is automatically set to the least destructive element.
  • When the dialog opens, the content in the AlertDialogHeader and AlertDialogBody are announced by screen readers via aria-labelledby and aria-describedby attributes.
  • Clicking on the overlay closes the AlertDialog.
  • Pressing esc closes the dialog.

Props#

AlertDialog and its components compose the Modal component. The only exception is that it requires a leastDestructiveRef which is similar to the initialFocusRef of Modal

NameTypeDefaultDescription
leastDestructiveRef (required)React.RefThe least destructive action to get focus when dialog is open