approved to add Design complete implementation pending

Alert Dialogs are used to block the user from moving forward in a particular workflow with a quick message that requires agreement before the action or next step can be taken. An example is providing a warning that settings may not be updated if the user has not chosen to save their changes.

The Alert Dialog is a preconfigured Modal with the following options:

• Scrolling = false

• Render Header Close Button = false

• Heading = true/false

• Body = true/false

• Primary action = true

• Secondary close/cancel action = true/false

Anatomy

Level 4 elevation

Fonts

• Heading 4

• Body Default

Buttons

• Primary (primary action)

• Tertiary (secondary action/close)

Background color: Extras/White

Resources

Foundations and Components

Elevation level 4

Button

Use cases

• To alert the user about a change and ask them to provide confirmation.

• A full page transparent overlay is shown underneath the dialog to provide visual focus.

• Buttons should always be positioned to the right of the dialog with the primary action taking the right most position, and the secondary action to its left.

• Buttons should be consistent and generic across the platform rather than specific to any one modal. It is better for the user to see Save and Cancel or OK and Cancel as consistent options than to see Save settings, or Delete problem.
  
  

• The dialog has a minimum height of 171px.

• On desktop screens (MD, L, XL) the dialog has one standard width at 400px (??).

• On mobile screens (XS) the dialog takes up 80% of the screen width. (??)

Variants

• One or two actions can be presented to the user

• The content of the message may include both a title and message, or only a message if the content does not benefit from having both.

Behaviors