Chakra-UI

I♥️Components

Alert Dialog

|

Chakra Docs

|

⦾ Chakra UI's AlertDialog is a robust and flexible component designed to create accessible alert dialog boxes or modals. These dialog boxes, often used for confirming actions or displaying important messages, interrupt the user flow with a mandatory action or confirmation.

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:

Examples

Default Usage

⦾ This is is an example of how to use the AlertDialog component from Chakra UI.

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.

Code

Modifying the Animated Transition:

⦾ In Chakra UI, the Modal component has a default transition animation called "scale", which means it smoothly scales up and down when opening and closing.

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.

Code

Did you know?

Creative Idea No. 1

Age Verification Dialog: You can also us the AlertDialog to verify the user's age before allowing access to age-restricted content. This component serves a crucial role in ensuring age-restricted content is appropriately gated. When a user attempts to access the site or a certain section of it, this dialog box pops up asking if the user is above a certain age (18 in this case). This is essential for websites that deal with age-sensitive content, such as alcohol sales, gambling, or adult content. It can also help in complying with legal and ethical guidelines related to the display and distribution of age-restricted material. It's worth noting that for truly secure age verification, more robust systems are needed, as self-reported checks can easily be bypassed.

Code

Creative Idea No. 2

Product Review Dialog: You can use AlertDialog to ask users for a rating or review after they have used your app or website for a while. This component is designed to gather user feedback on a specific product in a structured and efficient manner. It presents a dialog box to the user with input fields to capture the title and body of the review, along with a star rating system for a numerical evaluation. This could be particularly useful on e-commerce platforms where user reviews play a vital role in influencing purchase decisions. The collected data can then be used to display testimonials or be analyzed for business insights.

Code

Creative Idea No. 3

Unsaved Changes Alert: You can use AlertDialog to warn users about unsaved changes when they're trying to navigate away from a form or a settings page. This component is designed to prevent users from accidentally losing their progress or changes made within a form or similar editable contexts. Whenever a user makes changes and attempts to navigate away or close the dialog box without saving, this alert dialog pops up warning them about the potential loss of unsaved data. It gives the user the option to either continue with their action (and potentially lose data), or cancel their action and go back to save their changes. This component can be incredibly useful in user interfaces where data entry is involved, such as content management systems, administrative dashboards, or complex forms. It improves the user experience by safeguarding against inadvertent data loss.

Code

copyright © 2023 IHeartComponents | evanmarie.com

created with love by the I♥️Components team using

Chakra-UIRemix

Special thanks to Stefan Bohacek / Generative Placeholders.