Overlays
Dropdown menu
A list of actions triggered from a button. Group related items under a label, separate groups with a rule, and mark irreversible actions as destructive.
Purpose
Use a dropdown menu to collapse a set of actions behind one trigger — the standard answer when a row or toolbar would otherwise carry more than three buttons.
Actions
Best practices
Do
- Put destructive items last, after a separator, and mark them
destructive. - Label groups when the menu mixes unrelated kinds of action.
- Write items as verb phrases: "Resend welcome email", not "Email".
Don't
- Hide the single most common action in a menu — surface it as a button.
- Nest more than one level of submenu.
- Use a menu for choosing a value; that is Select.
Accessibility & keyboard
- Keyboard: Enter or Space opens; arrow keys move between items; Esc closes and restores focus.
- Type-ahead jumps to the first item matching the typed letters.
Every DropdownMenu part and prop in Storybook
PopoverDraft
A lightweight surface anchored to its trigger, for a small form or a snippet of contextual content. Unlike a tooltip it can hold interactive controls.
TooltipDraft
A small hint shown on hover or focus. Non-interactive by design — it cannot hold buttons or links, and its content must never be the only way to reach information.