Modal
A dialog over the page. Centered on desktop; on phones a sheet that slides up from the bottom, or centered if you prefer.
import { Modal, ModalTrigger, ModalContent, ModalHeader, ModalTitle, ModalDescription, ModalBody, ModalFooter, ModalClose } from "pleate/modal";Form and long content
Resize to a phone width to see the sheet.
Props
- Modal
Radix Dialog root.
open, defaultOpen, onOpenChange- ModalContent size
Desktop width.
"sm" | "md" | "lg" | "xl" | "full"default "md"- ModalContent mobile
Phone presentation.
"sheet" | "center"default "sheet"- showClose / closeLabel
Corner close button.
boolean / stringdefault true
Accessibility
- Focus is trapped inside and returns to the trigger.
- Escape and backdrop click close it; the page behind can't scroll.
- Labelled by ModalTitle, described by ModalDescription.