Modal
A modal dialog component that displays content in a layer above the main application.
Overview
- size
- small · medium · large
- Toggles
- isOpen
All options
Size and header
Open each variant. Widths are 480px (small), 600px (medium, the default) and 1024px (large).
| size \ header | title | title + secondTitle |
|---|---|---|
| small | ||
| medium | ||
| large |
Examples
With second title
Add a secondary title below the main title for additional context (left aligned).
Accessibility
Keyboard
When a modal opens, focus moves inside it and Tab cycles through its controls without leaving the dialog. Escape closes it, page scroll is locked while it is open, and focus returns to the button that opened it.
Screen readers
The panel has role="dialog" and aria-modal="true", and is labelled by its title when one is set.
Props
| Prop | Type | Required | Description |
|---|---|---|---|
| isOpen | boolean | Yes | — |
| title | string | No | — |
| secondTitle | string | No | — |
| children | React.ReactNode | Yes | — |
| onClose | () => void | Yes | — |
| actions | React.ReactNode | No | — |
| size | 'small' | 'medium' | 'large' | No | — |