Modal
A dialog overlay island. The triggerLabel prop renders a built-in trigger button. Clicking the overlay or pressing Escape closes the modal. Use opened to control the initial open state from SSR.
Default
import { Modal } from '@davaux/ui'
<Modal
triggerLabel="Open modal"
title="Modal title"
body="This is the modal body content."
/>Sizes
<Modal triggerLabel="Small" title="Small modal" size="sm" body="..." />
<Modal triggerLabel="Medium" title="Medium modal" size="md" body="..." />
<Modal triggerLabel="Large" title="Large modal" size="lg" body="..." />Centered
<Modal
triggerLabel="Open centered"
title="Centered modal"
body="Vertically centered in the viewport."
centered
/>Full screen
<Modal
triggerLabel="Open fullscreen"
title="Fullscreen modal"
body="Covers the entire viewport."
fullScreen
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
opened | boolean | false | Initial open state (SSR) |
title | string | — | Modal header title |
body | string | '' | Modal body text |
triggerLabel | string | — | Renders a built-in trigger button with this label |
size | 'xs'|'sm'|'md'|'lg'|'xl'|'auto'|'full' | 'md' | Modal content width |
centered | boolean | — | Vertically centers the modal in the viewport |
fullScreen | boolean | — | Expands the modal to fill the viewport |