Modal

Modal

An accessible dialog component with focus trapping and scroll lock.

Usage

typescript
1import { Modal } from '@flint-ui/core'
2

3<Modal open={isOpen} onClose={() => setIsOpen(false)}>
4  <Modal.Title>Confirm Action</Modal.Title>
5  <Modal.Description>
6    This will permanently delete the project.
7  </Modal.Description>
8  <Modal.Actions>
9    <Button variant="ghost" onClick={() => setIsOpen(false)}>
10      Cancel
11    </Button>
12    <Button variant="primary" onClick={handleDelete}>
13      Delete
14    </Button>
15  </Modal.Actions>
16</Modal>

Behavior

Focus is trapped inside the modal when open. Pressing Escape closes it. Scroll is locked on the body. Focus returns to the trigger element on close.

<callout>Important: Modal requires a wrapping FlintProvider. Focus trapping will not work without it.

Advanced Usage