Overflow Menu
ProA three-dot (⋯) icon button that opens a dropdown of secondary actions. Used when space is limited and non-primary actions need to be tucked away — common in table rows, card headers, and list items.
4 variants
Variants
| Variant | Description | When to use |
|---|---|---|
| Default | Vertical three-dot overflow trigger with dropdown menu. | Use in compact contexts like table row actions, card headers, and list items. |
| With Icons |
Usage Guidelines
Do
Use the three-dot icon (⋯) consistently across the product for overflow.
Don't
Hide primary actions in overflow — only secondary actions belong here.
Do
Order items by frequency of use — most common first.
Don't
Use different overflow icons in different contexts — consistency matters.
Do
Include danger-styled items last for destructive actions.
Don't
Include more than 6 items without grouping.
Code
Design Tokens
Accessibility
- Trigger button needs aria-label="More actions" or similar.
- Same menu ARIA pattern as Dropdown Menu.
- Focus management: Escape closes and returns focus to trigger.