Modals and Drawers

Payload provides several overlay surfaces for focused actions and supporting content. The Admin Panel supplies the modal context these components use.

Import

Confirmation modal

Give the trigger and modal the same modalSlug. Call openModal with that slug to display the modal. ConfirmationModal closes itself after onConfirm resolves or when the user cancels.

Drawer

Use DrawerToggler or openModal to open a Drawer. The trigger and drawer must share the same slug.

DrawerContentContainer adds the standard content spacing used inside Payload drawers. Set gutter={false} on Drawer when the drawer's contents manage their own horizontal spacing.

Choosing a surface

• Use ConfirmationModal to confirm a focused action.
• Use Drawer for supporting content that should remain connected to the current view.
• Use Modal for a custom dialog and FullscreenModal when the content needs the full viewport.
• Use ItemsDrawer when the user needs to pick from a searchable list of Blocks or Widgets, as Payload does when adding a row to a Blocks field.
• Use the useDocumentDrawer or useListDrawer hooks for document selection. Each returns the drawer, its toggler, and the drawer's state.

Common props

These are the props most commonly used. See the exported types in @payloadcms/ui for the complete list.

ConfirmationModal

Drawer

* An asterisk denotes that a prop is required.

Provider requirements

These components use the modal, translation, and drawer-depth contexts supplied by the Payload Admin Panel. When composing them outside the Admin Panel, provide the equivalent contexts before rendering the components.