AlertDialog component is used 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.
The modal doesn't come with any transition by default so you can manage this
yourself. Chakra exports two transition components
provide simple transitions.
For some reason, focus doesn't return back to the trigger after the transition
ends. As a walkaround, you might need to set
finalFocusRef to the trigger or
any other element, and set
- AlertDialog has role
aria-modalset to true.
- When the dialog opens, focus is automatically set to the least destructive element.
- When the dialog opens, the content in the
AlertDialogBodyare announced by screen readers via
- Clicking on the overlay closes the AlertDialog.
- Pressing esc closes the dialog.
AlertDialog and it's components composes 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|
Proudly made in 🇳🇬
Released under the MIT License.
Copyright © 2020 Segun Adebayo