Modal

Focus-trapping dialog for confirmations, forms, and brief content detours. Aligned with J&J DS v1.2 (Figma 13339:82204/82181). Backed by Radix Dialog — handles focus, ESC, scroll-lock, and overlay click-out by default.

Basic confirmation

Headline + body + primary/secondary actions. Close button (X) at the top-right, overlay click and ESC close the modal.

Show source

<Modal>
  <ModalTrigger asChild>
    <Button>Open modal</Button>
  </ModalTrigger>
  <ModalContent>
    <ModalHeader>
      <ModalTitle>Modal headline goes here</ModalTitle>
    </ModalHeader>
    <ModalBody>
      <ModalDescription>Lorem ipsum dolor sit amet…</ModalDescription>
    </ModalBody>
    <ModalFooter>
      <ModalClose asChild><Button>Primary option</Button></ModalClose>
      <ModalClose asChild><Button variant="secondary">Secondary option</Button></ModalClose>
    </ModalFooter>
  </ModalContent>
</Modal>

With media (ModalMedia + AspectRatio)

Insert a full-bleed media region above the header. 16:9 is the canonical landscape ratio.

Show source

<ModalContent>
  <ModalMedia>
    <AspectRatio ratio={16 / 9}>
      <img src="…" alt="…" />
    </AspectRatio>
  </ModalMedia>
  <ModalHeader><ModalTitle>…</ModalTitle></ModalHeader>
  …
</ModalContent>

Sizes

Small (max-w-md), medium (max-w-lg, default), large (max-w-2xl).

Show source

<ModalContent size="sm">…</ModalContent>
<ModalContent size="md">…</ModalContent>
<ModalContent size="lg">…</ModalContent>

Destructive confirmation

Use the danger Button variant for destructive primary actions. Keep the secondary action first in the DOM so keyboard users Tab to it before the destructive one.

Show source

<ModalFooter>
  <ModalClose asChild><Button variant="secondary">Cancel</Button></ModalClose>
  <ModalClose asChild><Button variant="danger">Delete study</Button></ModalClose>
</ModalFooter>