Dialogs

Usage

A dialog is used whenever we need to interrupt the user flow and prompt for a specific action. Only to be used If an action is needed to continue a process. In other cases, a popover is recommended.

Anatomy

A dialog has three sections:

Header

  • Fixed position
  • has the same style as our banner component.
  • (Optional) 24x24 icon
  • Header 2 or 3
  • Dismissable via the Icon button

Body

  • Scrolls when the total height exceeds the viewport.
  • Used to display the contents of the message and can have any type of content.

Footer

  • Fixed position
  • Primary action
  • (Optional) secondary action
  • (Optional) text link action

Widths

There are four widths available: small, medium, large and fullscreen.

For full-screen dialogs, a margin-left and -right is used to define the width based on the viewport.

Types

The header can be used to assign a custom type. This provides an extra visual clue on the type of modal.

There are three custom modal types: succes, warning and desctructive. For the destructive modal, the primary CTA is the destructive button.