← Design system
Modal
Interactive examples and usage for the Modal component.
Examples
Props
| Prop | Type | Default | Description |
|---|---|---|---|
open | boolean | false | Whether the modal is open |
onclose | () => void | undefined | Callback when the modal is closed |
size | 'sm' | 'md' | 'lg' | 'xl' | 'full' | 'md' | Modal width |
closeOnOverlayClick | boolean | true | Close when clicking the backdrop overlay |
title | string | undefined | Modal heading text |
showCloseButton | boolean | true | Show the close button in the header |
Keyboard
| Key | Action |
|---|---|
| Escape | Close the modal |
| Tab | Cycle focus through focusable elements (trapped inside modal) |
| Shift + Tab | Cycle focus backwards (trapped inside modal) |