Overlays

Modal

Accessible dialog built on Radix Dialog. Renders into a portal at document.body with a blurred backdrop. Includes focus trapping, Escape to close, and backdrop-click to dismiss. Pass a trigger element for uncontrolled usage, or control open externally.

Source · API

Examples

Loading examples…

API

From COMPONENTS.md.

Accessible dialog, portaled to document.body.

<Modal
  open={open}                    // boolean — controlled
  onOpenChange={setOpen}         // (boolean) => void
  title="Edit Recipe"            // ReactNode
  description="…"               // ReactNode
  footer={<><Button>Cancel</Button><Button variant="accent">Save</Button></>}
  trigger={<Button>Open</Button>}// ReactNode — alternative to controlled open
  size="md"                      // 'sm' (400px, default) | 'md' (560px) | 'lg' (760px)
  scrollable                     // boolean — body overflow-y: auto, max-height: 70vh
  aria-describedby={messageId}   // string — id of body text that describes it, when there's no `description`
>
  {/* body content */}
</Modal>