Modal

A highly accessible, animated overlay for displaying detailed content, critical alerts, or complex forms.

Import

tsx

import { Modal, ModalHeader, ModalTitle, ModalDescription, ModalFooter } from '@tac-ui/web';

Default Usage

A standard modal with a blurred backdrop, smooth entrance animation, and built-in focus trapping.

tsx

const [open, setOpen] = useState(false);

<Button onClick={() => setOpen(true)}>Open Default Modal</Button>
<Modal open={open} onClose={() => setOpen(false)}>
  <ModalHeader>
    <ModalTitle>Action Required</ModalTitle>
    <ModalDescription>
      Are you sure you want to proceed? This action cannot be undone.
    </ModalDescription>
  </ModalHeader>
  <ModalFooter>
    <Button variant="outline" onClick={() => setOpen(false)}>Cancel</Button>
    <Button onClick={() => setOpen(false)}>Confirm</Button>
  </ModalFooter>
</Modal>

Sizes

Modals are responsive and provide maximum width presets to handle various content sizes.

tsx

<Modal open={open} onClose={handleClose} size="sm">...</Modal>
<Modal open={open} onClose={handleClose} size="md">...</Modal>
<Modal open={open} onClose={handleClose} size="lg">...</Modal>
<Modal open={open} onClose={handleClose} size="xl">...</Modal>

Without Backdrop

You can disable the backdrop overlay if you want to keep the background visible without an overlay tint, though focus is still trapped.

tsx

<Modal open={open} onClose={handleClose} backdrop={false}>...</Modal>

API Reference

Prop	Type	Default	Description
open	boolean	false	Controls whether the modal is visible in the DOM.
onClose	() => void	-	Callback fired when the modal requests to be closed (via Escape or backdrop click).
size	"sm" \| "md" \| "lg" \| "xl"	"md"	Maximum width of the modal panel.
backdrop	boolean	true	When false, the dark blurred backdrop overlay is hidden.
layoutId	string	-	Optional Framer Motion layoutId for shared element transition.
children	React.ReactNode	-	Modal content to render. Recommended to construct with ModalHeader, ModalTitle, ModalDescription, and ModalFooter.