Modal
A Modal is a component that appears on top of the main content of the page. It is used to display important information or to request user input, while blocking interaction with the rest of the page.
Focus
By default Modal traps focus within it's content while it is open. When the Modal is closed, focus is returned to the element that had focus before the Modal was opened.
Keep in mind, that Modal default slot content should have at least one tabbable node in it. This is required for the focus trap to work properly.
Props
| Name | Type | Default | Description |
|---|---|---|---|
modelValue | boolean | false | Whether the Modal is opened or not. |
focusTrap | boolean | true | Focus trap is enabled or not. |
Slots
| Name | Description |
|---|---|
default | The content of the Modal. |
Design Tokens
tokens.config.ts
import { defineTheme } from 'pinceau'
export default defineTheme({
elements: {
modal: {
zIndex: '50',
scrim: {
backgroundColor: {
initial: '{color.gray.50}',
dark: '{color.gray.900}'
},
backdropFilter: 'none'
},
},
}
})