-
Notifications
You must be signed in to change notification settings - Fork 870
Dangerous confirm modal best practices #6506
Copy link
Copy link
Closed
Labels
accessibilitydesign decisionUse this to flag an item that needs input from the design teamUse this to flag an item that needs input from the design teamdocumentationIssues or PRs that only affect documentation - will not need changelog entriesIssues or PRs that only affect documentation - will not need changelog entries
Metadata
Metadata
Assignees
Labels
accessibilitydesign decisionUse this to flag an item that needs input from the design teamUse this to flag an item that needs input from the design teamdocumentationIssues or PRs that only affect documentation - will not need changelog entriesIssues or PRs that only affect documentation - will not need changelog entries
Type
Fields
Give feedbackNo fields configured for issues without a type.
We have multiple modals in Kibana that are used to ask for confirmation when you are leaving an usaved work in a page. For example, Lens uses the following


and Dashboard has a similar one with a different action and color:
Following EUI example for dangerous confirm modals: https://eui.elastic.co/#/layout/modal#confirm-modal Kibana Dashboard should align to the practice and use the dangerous color for the primary button.
But I have a doubt: is that a good practice? The difference with the simple Confirm Dialog is just the color of the button.
I know that the text of the button is also different, but to me it looks like it can be confusing.
WCAG says that we should not use the color alone and I believe that in this situation we should probably improve it by switching the buttons roles: the primary button should not be the destructive one, but the less destructive: like the
Cancel, or something better named likeContinue editing. Where the destructive buttonDismiss/Discard/Delete/Destroyshould be placed on the other side with less emphasis to avoid hasty interactions.In this way we promote:
Interested to hear your thoughts
cc @elastic/kibana-design