An AlertDialog is a type of modal window that appears in front of app content to provide critical information or ask for a decision. Dialogs should always be in response to a user action and should never appear unprovoked.

🚧 Under construction

This component is under active development. If you need this component for your project, create an issue in the GitHub repo.


A Dialog that requires the user to take action to move forward.

#Component structure

#1. Title

The title uses the sentence case and should be used to confirm the action being attempted. No more than two lines of text for titles.

#2. Supporting text

Supporting text length is much more flexible when using dialogs. Short and concise is always preferable but there is room to be a little more verbose if needed. Aim for 2-3 sentences ideally, 5-6 sentences max.

#4. Buttons

Like alerts, dialogs require acknowledgment before closing. A dialog should have a primary-button that serves as final confirmation for the action being attempted. A dialog may optionally feature a secondary-button to dismiss the modal.


Dialogs open in the center of the viewport and disable all app functionality when they appear, and remain on screen until confirmed, dismissed, or a required action has been taken.
An alert displays an important, succinct message in the bottom right-hand corner of the viewport.
Alerts are persistent and nonmodal, and require user input to take action or dismiss.
Alerts can utilize icons and variations in color for increased prominence.


Dialogs are classified as high urgency. Dialogs require an action to be taken before proceeding, and are highly and purposefully interruptive to the user experience. Use them sparingly.
Component Urgency Content Behavior Actions Example
Snackbar Low Informational Transient (3-10 seconds) 0-1 Featured added, "Successfully updated a shared draft"
Alert Medium Awareness of state Persistent, nonmodal, dismissable 1-2 Your page has been successfully published
Alert Dialog High Require a choice/acknowledgement Persistent, modal, dismissable 1-2 Are you sure you want to use the shared draft?

#Accessibility considerations

Copyright 2021 Arc XP