Modal

Accessible dialog built on Radix UI. Focus-trapped, keyboard-dismissible.

Basic modal

<Modal>
  <ModalTrigger asChild>
    <Button>Open modal</Button>
  </ModalTrigger>
  <ModalContent>
    <ModalHeader>
      <ModalTitle>Confirm reservation</ModalTitle>
      <ModalDescription>Description text here.</ModalDescription>
    </ModalHeader>
    <ModalFooter>
      <ModalClose asChild>
        <Button variant="ghost" size="sm">Cancel</Button>
      </ModalClose>
      <Button size="sm">Confirm</Button>
    </ModalFooter>
  </ModalContent>
</Modal>