ZModal

Modal dialog overlay

Example

Import

import { ZModal } from "zurto-ui";

Usage

import { ZModal, ZButton } from "zurto-ui";
import { useState } from "react";

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

  return (
    <>
      <ZButton onClick={() => setOpen(true)}>Open Modal</ZButton>
      <ZModal open={open} onClose={() => setOpen(false)} title="Modal Title">
        <p>This is the modal content.</p>
        <ZButton onClick={() => setOpen(false)}>Confirm</ZButton>
      </ZModal>
    </>
  );
}

Props

| Prop | Type | Default | Description | | --------- | ------------ | ------- | ------------------ | ----- | ------ | ----------- | | open | boolean | false | Control visibility | | onClose | () => void | - | Close handler | | title | string | - | Modal title | | size | 'sm' | 'md' | 'lg' | 'xl' | 'md' | Modal width |

Accessibility

• ✅ Keyboard navigation support
• ✅ ARIA attributes included
• ✅ Screen reader friendly
• ✅ Focus management