AlertDialog

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.

Features

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.

#Usage

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.

#Priority

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.