Modal

Basic Usage

Provides contextual feedback messages for typical user actions with the handful of available and flexible alert messages. A rendered modal with header, body, and set of actions in the footer.

Other Variants

Panel

Panel modal can should slide out from the right and remained aligned to the right. The Panel modal is used for large scrollable content - specifically, all forms.

Alert Dialog

Alerts the user of additional information when completing a task. Generally only primary, warning and danger are used for alert dialog.

• Informational uses primary colour on heading and button text-primary, btn-primary and the #info-circle-outline icon.
• Warning uses primary colour on heading and button text-warning, btn-warning and the #warning-triangle-outline icon.
• Danger uses primary colour on heading and button text-danger, btn-danger and the #error-circle-outline icon.