# Popup

Source: https://payloadcms.com/docs/ui-components/popup

The `Popup` component renders a trigger and positions its content in a portal. Use `PopupList` helpers to build compact action menus.

## Import

```tsx
import { Popup, PopupList } from '@payloadcms/ui'
```

## Action menu

**Implementation**

```tsx
<Popup button="Actions" size="small">
  <PopupList.ButtonGroup>
    <PopupList.Button onClick={() => editDocument()}>Edit</PopupList.Button>
    <PopupList.Button onClick={() => duplicateDocument()}>Duplicate</PopupList.Button>
    <PopupList.Divider />
    <PopupList.Button onClick={() => deleteDocument()}>Delete</PopupList.Button>
  </PopupList.ButtonGroup>
</Popup>
```

**Styling**

Style the portaled Popup content and caret size without changing trigger positioning or menu behavior.

```css
.popup__content {
  --popup-caret-size: 10px;
  background: #211b4d;
  color: #ffffff;
  border: 1px solid #6d5dfc;
  border-radius: 8px;
}
```

- `--popup-caret-size`: Popup caret dimensions.
- `background`: Popup menu surface.
- `border`: Popup menu outline.
- `color`: Inherited menu text color.

Popup content supports keyboard navigation and automatically flips when there is not enough viewport space in the preferred direction.

## Common props

These are the props most commonly used with this component. See its exported types in `@payloadcms/ui` for the complete list.

| Prop              | Type                                              | Default    | Description                                            |
| ----------------- | ------------------------------------------------- | ---------- | ------------------------------------------------------ |
| `button`          | `ReactNode`                                       | —          | Content rendered inside the trigger.                   |
| `children`        | `ReactNode`                                       | —          | Content rendered inside the popup.                     |
| `render`          | `({ close }) => ReactNode`                        | —          | Renders content with a function for closing the popup. |
| `size`            | `'small' \| 'medium' \| 'large' \| 'fit-content'` | `'medium'` | Sets the popup content width.                          |
| `buttonSize`      | `'xsmall' \| 'small' \| 'medium' \| 'large'`      | —          | Sets the trigger padding.                              |
| `horizontalAlign` | `'left' \| 'center' \| 'right'`                   | `'left'`   | Sets the preferred horizontal alignment.               |
| `verticalAlign`   | `'top' \| 'bottom'`                               | `'bottom'` | Sets the preferred vertical position.                  |
| `initActive`      | `boolean`                                         | `false`    | Sets the initial uncontrolled open state.              |
| `forceOpen`       | `boolean`                                         | —          | Controls the open state externally.                    |
| `disabled`        | `boolean`                                         | `false`    | Prevents the trigger from opening the popup.           |
| `showOnHover`     | `boolean`                                         | `false`    | Opens the popup while the trigger is hovered.          |