The purpose of confirmation dialogs is to prevent misclicks and to inform the user of potential consequences of their action. A confirmation dialog should always ask a concise question that includes a reference to the object the action is performed upon.
You can exclude extra information or form elements in confirmation dialogs, but these should be kept as compact as possible.
1 2 3 4 5 6 7 8
Confirmation dialogs are a special type that use the
role="alertdialog" attribute and will always include a cancel button.
The dialog itself will be limited to a width of 500px, the title can wrap into multiple lines and there will be no “X” button to close the dialog.
When to Use#
Over the past few years the term “Confirmation Fatique” has emerged that describes the issue of having too many confirmation dialogs even there is no real need for them. A confirmation dialog should only be displayed when the action requires further inputs, for example, a soft delete that requires a reason, or when the action is destructive.
The confirmation question should hint the severity of the action, in particular whether or not it is destructive. Destructive actions are those that cannot be undone and either cause a permanent mutation or that cause data loss. All questions should be phrased in one or two ways depending on the action.
Are you sure you want to delete “Example Object”? (German) Wollen Sie „Beispiel-Objekt“ wirklich löschen?
All other actions:
Do you want to move “Example Object” to the trash bin? (German) Möchten Sie „Beispiel-Objekt“ in den Papierkorb verschieben?
WoltLab Suite 6.0 currently ships with three presets for common confirmation dialogs.
All three presets have an optional parameter for the title of the related object as part of the question asked to the user. It is strongly recommended to provide the title if it exists, otherwise it can be omitted and an indeterminate variant is used instead.
Soft deleting objects with an optional input field for a reason:
1 2 3 4 5 6 7 8 9 10 11
reason will always be a string, but with a length of zero if the
false or if no reason was requested.
You can simply omit the value if you do not use the reason.
1 2 3 4 5 6 7 8
Restore a previously soft deleted object:
1 2 3 4
Permanently delete an object, will inform the user that the action cannot be undone:
1 2 3 4
Custom Confirmation Prompts#
custom() permits a custom confirmation dialog with a user-defined dialog content.
1 2 3 4 5 6
Use Custom HTML in the Dialog Body#
Some dialogs require additional input elements, for example, the prompt to remove an element has an optional text field for a reason.
1 2 3 4 5 6 7 8 9 10 11 12 13