Confirmation Dialog

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

Design

Variants

Informational Dialog

Use to display view-only information. No action is possible.

Action Confirmation

Use to present a confirmation that an action might be irreversible.

When the action is destructive, the primary action should be in GHOST style and NEGATIVE color. The secondary button should be OUTLINE style and SECONDARY color.

Note: If the primary action for a destruction confirmation dialog is "Cancel" (Like, "Cancel Process?"), the secondary button should be "Back".

Development

Variants

Informational Dialog

a!formLayout(
  titleBar: a!headerTemplateSimple(
    title: "Package Deleted"
  ), 
  contents: {
    a!richTextDisplayField(
      labelPosition: "COLLAPSED",
      value: "This package was deleted on 9/24/24 1:49 PM by Admin User."
    )
  },
  buttons: a!buttonLayout(
    primaryButtons: {
      a!buttonWidget(
        label: "Close",
        submit: true,
        style: "SOLID"
      )
    }
  )
)

Action Confirmation

a!formLayout(
  titleBar: a!headerTemplateSimple(
    title: "Publish Document"
  ), 
  contents: {
    a!richTextDisplayField(
      labelPosition: "COLLAPSED",
      value: "Once published, this document will be viewable by all users."
    )
  },
  buttons: a!buttonLayout(
    primaryButtons: {
      a!buttonWidget(
        label: "Publish",
        submit: true,
        style: "SOLID"
      )
    }, 
    secondaryButtons: {
      a!buttonWidget(
        label: "Cancel"
      )
    }
  )
)

Destructive Action Confirmation

a!formLayout(
  titleBar: a!headerTemplateSimple(title: "Delete Document"),
  contents: {
    a!richTextDisplayField(
      labelPosition: "COLLAPSED",
      value: "You are about to permanently delete Claim9236.pdf."
    ),
    a!messageBanner(
      primaryText: "This document cannot be recovered once deleted",
      backgroundColor: "WARN",
      highlightColor: "WARN",
      icon: "exclamation-triangle"
    )
  },
  buttons: a!buttonLayout(
    primaryButtons: {
      a!buttonWidget(
        label: "Delete",
        submit: true,
        style: "OUTLINE",
        color: "NEGATIVE",
        loadingIndicator: true
      )
    },
    secondaryButtons: {
      a!buttonWidget(
        label: "Cancel",
        value: true,
        saveInto: {},
        submit: true,
        style: "OUTLINE",
        color: "SECONDARY",
        validate: false
      )
    }
  )
)