AlertDialog component is used to interrupt the user with a mandatory confirmation or action.
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.
AlertDialog requires that you provide the
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.
AlertDialog doesn't come with any transitions by default so you can manage
this yourself. Chakra exports four transition components (
SlideFade) to provide simple transitions.
When adding transitions, kindly pay attention to the
timeoutfor the overlay and content transitions. In this example,
Fadetransitions slower than the
SlideFadefor it to work correctly.
aria-modalset to true.
AlertDialogBodyare announced by screen readers via
AlertDialog and its components compose the
Modal component. The only exception
is that it requires a
leastDestructiveRef which is similar to the
|leastDestructiveRef (required)||The least destructive action to get focus when dialog is open|