Confirmation Dialog

Confirmation dialogs are used to present the user with a directive action to prevent adverse situations

Design

Variants

Action Confirmation

Use to present a confirmation that an action might be irreversible

Error State

Use to present an error state

Note: Use this approach sparingly. For instance, when designing forms, use field level validations as much as possible.

Usage

Confirmation Modal

If the out of the box confirmation dialog component is not technically feasible, you may use a!formLayout with a warning banner to inform users that the action is not reversible.

Development

Confirmation Modal

a!formLayout(
  titleBar: a!headerTemplateSimple(
    title: "Delete Document | Claim9236.pdf",
  ), 
  contents: {
    a!richTextDisplayField(
      labelPosition: "COLLAPSED",
      value: "Are you sure you want to delete this document?"
    ),
    a!cardLayout(
      contents: {
        a!sideBySideLayout(
          items: {
            a!sideBySideItem(item: {}, width: "MINIMIZE"),
            a!sideBySideItem(
              item: a!richTextDisplayField(
                labelPosition: "COLLAPSED",
                value: {
                  a!richTextIcon(
                    icon: "exclamation-triangle",
                    color: "#E5BF00",
                    size: "STANDARD"
                  )
                },
                marginAbove: "NONE",
                marginBelow: "NONE"
              ),
              width: "MINIMIZE"
            ),
            a!sideBySideItem(
              item: a!richTextDisplayField(
                labelPosition: "COLLAPSED",
                value: a!richTextItem(
                  text: "This document cannot be recovered once deleted"
                ),
                marginAbove: "NONE",
                marginBelow: "NONE"
              ),
              width: "MINIMIZE"
            )
          },
          alignVertical: "TOP",
          spacing: "STANDARD",
          marginAbove: "STANDARD",
          marginBelow: "STANDARD"
        )
      },
      style: "#FFF9DB",
      shape: "SEMI_ROUNDED",
      marginAbove: "STANDARD",
      showBorder: false
    )
  },
  buttons: a!buttonLayout(
    primaryButtons: {
      a!buttonWidget(
        label: "Delete",
        submit: true,
        style: "SOLID",
        loadingIndicator: true
      )
    },
    secondaryButtons: {
      a!buttonWidget(
        label: "Cancel",
        value: true,
        saveInto: {},
        submit: true,
        style: "OUTLINE",
        validate: false
      )
    }
  )
)