Menus & Overlays

Menus hide secondary actions behind a trigger, usually a 3-dot kebab icon, to keep interfaces clean. Tooltips explain what something does on hover without adding visual clutter. Use menus for actions too infrequent to deserve their own button: duplicate, export, archive, delete. Use tooltips for icon-only buttons that need a text label for accessibility. Style destructive actions like Delete in red with the menuItem--danger class. Place them at the bottom of the menu, separated by a divider.


Interactive Preview

Context Menu Menu items preview

Status

Delete

Props

Show delete item

Show status submenu

Context Menu

Trigger (interactive)
Onboarding
Active
Click the 3-dot icon, then click "Status" to see the submenu
Main Menu
Status

Delete
Standard items + danger item with red text
Status Submenu
Draft
Active
Paused
Archived
Opens from "Status ›". Selected item highlighted in primaryLight
Property
Value

Min width

160px

Border radius

8pxradiusMd

Shadow

0 4px 12px rgba(0,0,0,0.12)shadow.dropdown

Border

1px solid #E2E2E4gray200

Item font

14px
·500

Item icon

16px

Item padding

vertical8px
·horizontal16px

Selected item bg

#FDEEE8primaryLight

Danger item

text#EF4444danger
·hover bg#FEE2E2dangerLight

Tooltip

Hover the icon to see the tooltip

Property
Value

Background

#12284Cnavy

Text color

#FFFFFF

Border radius

4pxradiusSm

Font size

12px