Design
Component checklist
Review required
React
Review required
Basics
A dropdown confirm is an alternative modal that appears on demand to provide the user with extra information, usually including an actionable item.
Dropdown confirm 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 for the user to ask the user to confirm if they want to remove or delete content.
The dropdown confirm 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 dropdown confirm by clicking on an item in a dropdown menu, the dropdown confirm replaces the whole dropdown menu. When the user dismisses the popover, the dropdown menu reappears to replace the confirmation dropdown.
Once triggered, the dropdown confirm disables all app functionality and remains on the screen until the user confirms or dismisses the required action.
Aim to use one dropdown confirm at a time. There is no exception to stacking multiple dropdown confirms over each other or combining them with other dialogs, such as modals.
Anatomy
The dropdown confirm is defined by its content and actions.
- Content—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, such as "Cancel" or "Learn more."
Behavior
The dropdown confirm is triggered when the user clicks 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