Modal

A dialog component for focused user interactions, confirmations, and forms.

Import

import { ZModal } from '@zurto/ui'

Basic Usage

ZButtonZModal

Welcome

This is a basic modal dialog.

123456

const [open, setOpen] = useState(false)
<ZButton onClick={() => setOpen(true)}>Open Modal</ZButton>
<ZModal open={open} onClose={() => setOpen(false)} title='Welcome'>
  <p>This is a basic modal dialog.</p>
  <ZButton onClick={() => setOpen(false)}>Got it</ZButton>
</ZModal>

Confirmation Dialog

ZModalZModalFooterZButton

Delete Item

Are you sure you want to delete this item? This action cannot be undone.

1234567

<ZModal open={open} onClose={handleClose} title='Delete Item'>
  <p>Are you sure you want to delete this item? This action cannot be undone.</p>
  <ZModalFooter>
    <ZButton variant='ghost' onClick={handleClose}>Cancel</ZButton>
    <ZButton variant='danger' onClick={handleDelete}>Delete</ZButton>
  </ZModalFooter>
</ZModal>

With Form

ZModalZInputZModalFooterZButton

Create Account

Email

Password

12345678

<ZModal open={open} onClose={handleClose} title='Create Account'>
  <ZInput label='Email' type='email' placeholder='john@example.com' />
  <ZInput label='Password' type='password' placeholder='••••••••' />
  <ZModalFooter>
    <ZButton variant='ghost'>Cancel</ZButton>
    <ZButton>Create Account</ZButton>
  </ZModalFooter>
</ZModal>

Sizes

<ZModal size="sm">Small modal (400px)</ZModal>
<ZModal size="md">Medium modal (500px)</ZModal>
<ZModal size="lg">Large modal (700px)</ZModal>
<ZModal size="xl">Extra large modal (900px)</ZModal>
<ZModal size="full">Full screen modal</ZModal>

Close Options

// Close on overlay click (default: true)
<ZModal closeOnOverlay={false}>...</ZModal>

// Close on Escape key (default: true)
<ZModal closeOnEscape={false}>...</ZModal>

// Show close button (default: true)
<ZModal showCloseButton={false}>...</ZModal>

Props

Prop	Type	Default	Description
openRequired	boolean	false	Controls modal visibility
onCloseRequired	() => void	–	Called when modal should close
title	string	–	Modal header title
size	'sm' | 'md' | 'lg' | 'xl' | 'full'	'md'	Modal width
closeOnOverlay	boolean	true	Close when clicking backdrop
closeOnEscape	boolean	true	Close when pressing Escape
showCloseButton	boolean	true	Show X button in header
scrollBehavior	'inside' | 'outside'	'inside'	How content scrolls
childrenRequired	ReactNode	–	Modal content

Compound Components

Component	Description
ZModal	Main modal container
ZModalHeader	Header with title and close button
ZModalBody	Scrollable content area
ZModalFooter	Footer with action buttons

Accessibility

• Focus trapped inside modal when open
• Focus restored to trigger element on close
• role="dialog" with aria-modal="true"
• aria-labelledby linked to title
• Escape key closes modal (configurable)
• Body scroll locked when open

Keyboard Support

Key	Action
Escape	Close modal (if enabled)
Tab	Move focus within modal
Shift + Tab	Move focus backwards