Confirmation dialog

The confirmation dialog is the only recommended saving behavior in settings. It appears as soon as changes are done and provides the save and discard button for the user. To guide users, there is the possibility to show additional text with the buttons, which should contain the impact of the changes made. Keep this text simple and think about the wording carefully. This text should also inform users about invalid inputs.

To prevent users from accidentially navigating to a different page without saving the changes, please lock all possible navigational elements. Instead of discarding the changes, we recommend to lock the screen and use the confirmation dialog as modal in this case.

Besides the saving behavior, the confirmation dialog can be used to place buttons for bulk actions, like bulk editing, bulk deleting of elements. The selection of such elements (in e.g. a table) is usually done with a checkbox and the dialog appears as soon as one element is selected.

<button dt-button (click)="resetExample()">Start example</button>
<dt-confirmation-dialog
  [state]="dialogState"
  aria-label="Dialog for changes that need to be confirmed or rejected"
>
  <dt-confirmation-dialog-state name="dirty">
    You have pending changes.
    <dt-confirmation-dialog-actions>
      <button dt-button variant="secondary" (click)="clear()">Clear</button>
      <button dt-button (click)="save()">Save</button>
    </dt-confirmation-dialog-actions>
  </dt-confirmation-dialog-state>
  <dt-confirmation-dialog-state name="success">
    Successfully saved!
  </dt-confirmation-dialog-state>
</dt-confirmation-dialog>

The <dt-confirmation-dialog> creates an overlay and slides a drawer up from the bottom of the screen. The contents of the drawer display arbitrary projected content. The content displayed is associated with the state input of the component, so that it can be changed according to the validity of a form or an unsaved change, etc.

It also supports disabling the rest of the page by adding an unclickable and opaque overlay, forcing the user to take action on the dialog. The confirmation dialog is part of all settings views.

Imports

You have to import the DtConfirmationDialogModule when you want to use the DtConfirmationDialog. The DtConfirmationDialog also requires Angular's BrowserAnimationsModule for animations. For more details on this see Step 2: Animations in the getting started guide.

@NgModule({
  imports: [DtConfirmationDialogModule],
})
class MyModule {}

Initialization

To use the confirmation dialog, add the <dt-confirmation-dialog> element to the view, including content to be projected into the dialog to handle the various states required:

<dt-confirmation-dialog [state]="currentState">
  <dt-confirmation-dialog-state name="myState">
    You have pending changes.
    <dt-confirmation-dialog-actions>
      <button dt-button variant="secondary">Clear</button
      ><button dt-button>Save</button>
    </dt-confirmation-dialog-actions>
  </dt-confirmation-dialog-state>
</dt-confirmation-dialog>

Inputs

dt-confirmation-dialog

The dialog is created by supplying markup to the component, and associating each piece of markup to particular "states" in which to display them. The component has an @Input() (state) and causes it to display the appropriate markup when that state is entered.

The other @Input() (showBackdrop) decides whether or not a backdrop disabling all other page functionality besides the dialog is displayed, in order to force the user to save or discard a change.

<button dt-button (click)="resetExample()">Start example</button>
<dt-confirmation-dialog
  [state]="dialogState"
  [showBackdrop]="showBackdrop"
  aria-label="Dialog for changes that need to be confirmed or rejected"
>
  <dt-confirmation-dialog-state name="cancel">
    <dt-confirmation-dialog-actions>
      <button dt-button (click)="cancel()">Cancel</button>
    </dt-confirmation-dialog-actions>
  </dt-confirmation-dialog-state>
  <dt-confirmation-dialog-state name="backdrop">
    Showing backdrop for 3 seconds... only then can you leave.
  </dt-confirmation-dialog-state>
</dt-confirmation-dialog>

The dt-confirmation-dialog-actions directive can be used to properly group action buttons used within a dt-confirmation-dialog-state.

To make our components accessible it is obligatory to provide either an aria-label or aria-labelledby.

dt-confirmation-dialog-state

Methods

dt-confirmation-dialog

Behavior

Once the changes have been saved a feedback message should be triggered. After 800ms, the whole dialog slides out to the bottom.

Animation

Responsiveness

The component is responsive. A "breakpoint" exists at 662px for the point at which the dialog becomes taller, the children of the dt-confirmation-dialog-state transition to flex wrap, and dt-confirmation-dialog-actions are wrapped to their own line. Animations still occur over the same duration in this state. Minimum widths can be supplied for dt-confirmation-dialog-state children that the component will honor.