Alert Dialog

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

    SourceTheme source@chakra-ui/modal

Import#

Chakra 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 '@chakra-ui/react'

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, onOpen, onClose } = useDisclosure()
const cancelRef = React.useRef()
return (
<>
<Button colorScheme='red' onClick={onOpen}>
Delete Customer
</Button>
<AlertDialog
isOpen={isOpen}
leastDestructiveRef={cancelRef}
onClose={onClose}
>
<AlertDialogOverlay>
<AlertDialogContent>
<AlertDialogHeader fontSize='lg' fontWeight='bold'>
Delete Customer
</AlertDialogHeader>
<AlertDialogBody>
Are you sure? You can't undo this action afterwards.
</AlertDialogBody>
<AlertDialogFooter>
<Button ref={cancelRef} onClick={onClose}>
Cancel
</Button>
<Button colorScheme='red' onClick={onClose} ml={3}>
Delete
</Button>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialogOverlay>
</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.

function TransitionExample() {
const { isOpen, onOpen, onClose } = useDisclosure()
const cancelRef = React.useRef()
return (
<>
<Button onClick={onOpen}>Discard</Button>
<AlertDialog
motionPreset='slideInBottom'
leastDestructiveRef={cancelRef}
onClose={onClose}
isOpen={isOpen}
isCentered
>
<AlertDialogOverlay />
<AlertDialogContent>
<AlertDialogHeader>Discard Changes?</AlertDialogHeader>
<AlertDialogCloseButton />
<AlertDialogBody>
Are you sure you want to discard all of your notes? 44 words will be
deleted.
</AlertDialogBody>
<AlertDialogFooter>
<Button ref={cancelRef} onClick={onClose}>
No
</Button>
<Button colorScheme='red' ml={3}>
Yes
</Button>
</AlertDialogFooter>
</AlertDialogContent>
</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.
Edit this page on GitHub

Proudly made inNigeria by Segun Adebayo

Deployed by Vercel