Component
Modal
A dialog overlay that captures focus and blocks interaction with the page behind it. Supports focus trapping, Escape to close, and body scroll lock.
Sizes
Usage
tsx
import { Modal, Button } from 'starkit-ui';
function Example() {
const [open, setOpen] = useState(false);
return (
<>
<Button onClick={() => setOpen(true)}>Open Modal</Button>
<Modal
open={open}
onClose={() => setOpen(false)}
title="Confirm Action"
footer={
<>
<Button variant="ghost" onClick={() => setOpen(false)}>Cancel</Button>
<Button variant="primary" onClick={() => setOpen(false)}>Confirm</Button>
</>
}
>
<p>Are you sure you want to proceed?</p>
</Modal>
</>
);
}
Accessibility
- Focus trap — Tab/Shift+Tab cycles within the modal
- Escape — closes the modal
- Body scroll lock — page cannot scroll while modal is open
- Auto-focus — first focusable element is focused on open
- Focus restore — previously focused element is restored on close
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| open * | boolean | — | Whether the modal is visible |
| onClose * | () => void | — | Called when the modal requests to close |
| title | ReactNode | — | Header title text |
| size | 'sm' | 'md' | 'lg' | 'md' | Width preset |
| footer | ReactNode | — | Footer content (typically action buttons) |
| closeOnOverlay | boolean | true | Whether clicking the overlay closes the modal |