💠 Alert Dialog

A modal dialog that interrupts the user with important content and expects a response.

Usage

The AlertDialog component is a modal dialog that interrupts the current task to convey critical information or require confirmation to the user.

It's crucial to use AlertDialogs sparingly to avoid disrupting the user's workflow. When an AlertDialog appears, it takes focus away from the main content and pauses task progression until the user responds to it.

When to use

• For critical information: Use AlertDialogs for urgent information that users must acknowledge before proceeding, such as errors or warnings that prevent the current process from continuing.
• For confirmation of actions: Employ AlertDialogs when you need the user to confirm or reject a significant action, especially one that is irreversible or has substantial impact, like removing a user account or overwriting data.
• For session timeouts: In cases where a user's session is about to expire or has expired, an AlertDialog can be used to warn the user and offer options to either extend the session or log out.

Remember to avoid using AlertDialogs for non-essential information that does not require immediate action or decision, as they can be disruptive and may negatively affect the user's experience if overused.

Examples

Default

Useful links

Here you go! Here are all the resources you might need if you are a designer, a developer or a content manager:

Accessibility

Adheres to the Alert and Message Dialogs WAI-ARIA design pattern (opens in a new tab).

Keyboard interactions