Alert Dialog

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

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.

function AlertDialogExample() {
  const [isOpen, setIsOpen] = React.useState(false);
  const onOpen = () => setIsOpen(true);
  const onClose = () => setIsOpen(false);
  const cancelRef = React.useRef();

  return (
    <>
      <Button className="bg-primary-500" onClick={onOpen}>
        Delete something
      </Button>
      <AlertDialog
        variant="blur"
        isOpen={isOpen}
        onClose={onClose}
        title="Please confirm"
        isCentered
        footer={
          <>
            <Button
              onClick={onClose}
              className="mr-3 bg-gray-200 text-gray-700 hover:bg-gray-300"
            >
              Nevermind
            </Button>
            <Button className="hover:bg-red-600 bg-red-500">Yes, delete</Button>
          </>
        }
      >
        Are you sure you want to delete something? This action is permanent, and
        we're totally not just flipping a field called "deleted" to "true" in
        our database, we're actually deleting something.
      </AlertDialog>
    </>
  );
}

Background blur#

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

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.

function TransitionExample() {
  const { isOpen, onOpen, onClose } = useDisclosure();

  return (
    <>
      <Button className="bg-primary-500" onClick={onOpen}>
        Discard
      </Button>

      <AlertDialog
        variant="blur"
        isOpen={isOpen}
        onClose={onClose}
        title="Discard Changes"
        isCentered
        footer={
          <>
            <Button
              onClick={onClose}
              className="mr-3 bg-gray-200 text-gray-700 hover:bg-gray-300"
            >
              Cancel
            </Button>
            <Button className="hover:bg-red-600 bg-red-500">Save</Button>
          </>
        }
      >
        Are you sure you want to discard all of your notes? 44 words will be
        deleted.
      </AlertDialog>
    </>
  );
}

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#

Name	Type	Default	Description
variant	`normal`, `blur`	`blur`	The least destructive action to get focus when dialog is open