Dialogs

Dialogs contain text and UI controls. They retain focus until dismissed or a required action has been taken. Use dialogs sparingly because they are interruptive.

Most of the details about dialogs have been covered in Components/Modal documentation. Please refer to this page for more details.

Alerts

Alerts are urgent interruptions, requiring acknowledgement, that inform the user about a situation.

Alerts with title bars

Use title bar alerts for high-risk situations, such as the potential loss of connectivity. Users should be able to understand the choices based on the title and button text alone.

Alerts without title bars

Most alerts don’t need titles. They summarize a decision in a sentence or two by either asking a question or making a statement related to the action buttons.

Buttons

Side-by-side buttons

Flat buttons should be used in dialogs. In addition, the affirmative button should be placed on the right while the dismissive button should be placed on the left while both should use the same colour, ideally, info or primary colour.

Stacked full-width buttons

When text labels contain too many characters, use stacked buttons to accommodate the text. Affirmative actions are stacked above dismissive actions.