Components

Modal

A dialog overlay that demands user attention. Supports multiple sizes, backdrop dismiss, and focus trapping for accessible modal interactions.

Installation

npm install @trinkui/react

Import

import { Modal } from "@trinkui/react";

Usage

Control the modal with the open and onClose props.

const [isOpen, setIsOpen] = useState(false);

<Button onClick={() => setIsOpen(true)}>Open Modal</Button>

<Modal
  open={isOpen}
  onClose={() => setIsOpen(false)}
  title="Confirm Action"
  description="Are you sure you want to proceed? This action cannot be undone."
  footer={
    <div className="flex gap-2 justify-end">
      <Button variant="ghost" onClick={() => setIsOpen(false)}>Cancel</Button>
      <Button onClick={() => setIsOpen(false)}>Confirm</Button>
    </div>
  }
>
  <p>Additional modal content goes here.</p>
</Modal>

Sizes

Available in five sizes: sm, md, lg, xl, and full.

<Modal size="sm" title="Small Modal" open={isOpen} onClose={handleClose}>
  <p>Compact dialog content.</p>
</Modal>

<Modal size="lg" title="Large Modal" open={isOpen} onClose={handleClose}>
  <p>Spacious dialog for forms or detailed content.</p>
</Modal>

<Modal size="full" title="Fullscreen Modal" open={isOpen} onClose={handleClose}>
  <p>Takes up the entire viewport.</p>
</Modal>

Dismiss Behavior

Control how the modal can be dismissed with closeOnBackdrop and closeOnEsc.

{/* Prevent closing by clicking backdrop */}
<Modal
  open={isOpen}
  onClose={handleClose}
  closeOnBackdrop={false}
  title="Persistent Modal"
>
  <p>Must use the close button or Escape key.</p>
</Modal>

{/* Prevent closing with Escape key */}
<Modal
  open={isOpen}
  onClose={handleClose}
  closeOnEsc={false}
  title="No Escape"
>
  <p>Escape key will not close this modal.</p>
</Modal>

Props

Prop	Type	Default	Description
open	boolean	false	Whether the modal is visible
onClose	() => void	-	Callback when the modal requests to close
title	string	-	Heading text for the modal
description	string	-	Description text shown below the title
size	"sm" \| "md" \| "lg" \| "xl" \| "full"	"md"	Width of the modal dialog
closeOnBackdrop	boolean	true	Close modal when clicking the backdrop overlay
closeOnEsc	boolean	true	Close modal when pressing the Escape key
children	ReactNode	-	Body content of the modal
footer	ReactNode	-	Footer content, typically action buttons

Accessibility

Uses role="dialog" and aria-modal="true" to communicate the modal to assistive technologies.
Focus is trapped inside the modal while open — tabbing cycles through interactive elements within the dialog.
Pressing Escape closes the modal (when closeOnEsc is true).
Focus is returned to the trigger element when the modal closes.
The modal title is referenced via aria-labelledby for proper labeling.
Background scroll is locked while the modal is open.

← Listbox Navbar →