Design
Component checklist
Review required
React
In development
Basics
A confirmation dropdown is an alternative modal that appears on demand to provide the user with extra information, usually including an actionable item.
Confirmation dropdown data is low-impact, providing a short amount of information and only takes one step for the user to complete the action. For example, a confirmation dropdown can appear the user to ask the user to confirm if they want to remove or delete content.
The confirmation dropdown appears on user demand, for example, when the user clicks on a button or an item from a dropdown menu.
If the user triggers the confirmation dropdown by clicking on an item in a dropdown menu, the confirmation dropdown replaces the whole dropdown menu. When the user dismisses the popover, the dropdown menu reappears to replace the confirmation dropdown.
Once triggered, the confirmation dropdown disables all app functionality and remains on the screen until the user confirms or dismisses the required action.
Aim to use one confirmation dropdown at a time. There is no exception to stacking multiple confirmation dropdowns over each other or combining them with other dialogs, such as modals.
Anatomy
The confirmation dropdown is defined by its content and actions.
- Content - The content of a confirmation dropdown may consist of a headline and a short block of text, although the headline is optional. The copy should be short, easy to understand, and actionable.
- Actions - The action is always expressed with one primary call-to-action button. This main action can be complemented with a secondary link, for example, "Cancel" or "Learn more."
Behavior
The confirmation dropdown is triggered when the user clicks on a button or item in a dropdown menu. The container appears over the interface and page contents, including the main navigation.
By default, the confirmation dropdown is either positioned on top of the trigger button or respects the position of the dropdown menu it replaces.
The popover is dismissed when
- Pressing outside of the dialogue
- Pressing the “Cancel” button
- Pressing the ESC key
- Pressing the Enter key if the “Cancel” button is focused
The popover is confirmed when
- Pressing the CTA button
- Pressing the Enter key if the CTA button is focused