The AlertDialog component in Chakra UI necessitates the use of the leastDestructiveRef property. This means that when using the AlertDialog component, you need to supply a reference to the least potentially harmful element in the dialog box.
In the AlertDialog's setting, a "destructive action" is any action that could have notable repercussions or irreversible results, such as the removal of data. It's crucial to focus initially on the least harmful element in the dialog to avoid users accidentally confirming a harmful action.
When you supply the leastDestructiveRef property with a reference to the least potentially harmful element, the AlertDialogcomponent ensures that focus is automatically given to this element when the dialog box opens. This makes the dialog box easier and safer to navigate and interact with, diminishing the chances of users unintentionally taking destructive actions.
The need to provide the leastDestructiveRef property aligns with the guidelines given by the Web Accessibility Initiative - Accessible Rich Internet Applications (WAI-ARIA), which aim to facilitate the creation of web content that's accessible to all users. Adherence to these guidelines ensures that dialog boxes are both usable and accessible to all users, including those who depend on assistive technology or keyboard navigation.
There are 7 different Alert Dialog related components:
AlertDialog: This is the parent component that holds all the other elements of the alert dialog. When you use it, you must provide a leastDestructiveRef prop. This should be a reference to an element which, when focused or clicked, performs a non-destructive action. This follows WAI-ARIA guidelines, helping to prevent users from accidentally confirming destructive actions.
AlertDialogHeader: This is used to display the title or main heading of the alert dialog. This component is optional, but recommended for providing context to the user about the alert dialog's content or purpose.
AlertDialogBody: This serves to display the main message or content of the alert dialog. This is often a brief description or question, guiding the user's response to the dialog.
AlertDialogContent: This serves as a wrapper for the AlertDialogHeader, AlertDialogBody, and AlertDialogFooter components. It helps in structuring the dialog box and can also be styled to fit your UI design requirements.
AlertDialogFooter: This is used for displaying actionable elements, such as buttons, for the user to interact with. For example, "Confirm" and "Cancel" buttons would reside here.
AlertDialogOverlay: This is a full-screen overlay that gets rendered behind the AlertDialog. This overlay aids in focusing the user's attention on the dialog by obscuring the rest of the user interface.
AlertDialogCloseButton: This is a specific component for adding a close button to the AlertDialog. This is typically placed in the top-right corner of the AlertDialog and allows users to dismiss the dialog without performing any action.
These components can be imported as follows:
It renders a button labeled "Delete Customer" and opens an alert dialog when clicked. The alert dialog prompts the user to confirm the deletion action with the message "Are you sure? You can't undo this action afterwards." It provides two buttons for the user to choose from: "Cancel" and "Delete". The useDisclosure hook is used to control the open and close state of the dialog, and the useRef hook is used to reference the cancel button within the dialog.
Modifying the Animated Transition:
However, you can customize the transition animation by using the motionPreset prop. By setting the value of motionPreset to "slideInBottom", "slideInRight", or "scale", you can change the transition effect of the modal.
For example, if you set motionPreset="slideInRight", the modal will slide in from the right side of the screen when opening. Similarly, motionPreset="slideInBottom" will make the modal slide in from the bottom of the screen. If you want to retain the default scaling transition, you can simply omit the motionPreset prop.
Did you know?
Creative Idea No. 1
Creative Idea No. 2
Creative Idea No. 3