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.
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.
#2. Supporting text
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.
|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?|