All components
Surfaces
Popover & Menu
A click popover over an opaque surface; fill it with MenuItems for dropdown menus. Closes on outside click or Escape.
Preview
Preview
light
dark
Code
<Popover trigger={<Button variant="ghost" size="sm">Menu</Button>}>
<MenuItem icon={<Pencil size={14} />}>Edit</MenuItem>
<MenuItem icon={<Trash2 size={14} />}>Delete</MenuItem>
</Popover>Import from @/components/ui.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
trigger | ReactNode | — | Element that toggles the popover. |
align | "start" | "end" | "start" | Horizontal alignment. |
Usage
Do
- Use for row actions and overflow menus.
Don't
- Put long forms inside a popover.