Modal component
The kit:modal component displays an overlay panel above the main content. It is designed for dialogs, contextual messages, forms or alerts requiring direct interaction.
The modal can be centered, fixed at the top or bottom of the screen, and closes in different ways depending on the options activated (outside click, Escape key, etc.). It is a flexible alternative to kit:dialog when you need more control over the structure, behavior or styling of the modal content, or when you want to manage the backdrop at the application level.
kit:modal is a div-based overlay positioned fixed over the viewport. Unlike kit:dialog, it does not use the native <dialog> element and has no built-in backdrop a global backdrop is typically managed at the application level. Use contain to embed the modal relative to its parent instead.
openis bindable set it totrueto open,falseto close, or bind it to react to closes.
Examples of modal
position
Controls the vertical alignment of the content panel.
- position:
'top' | 'center' | 'bottom'='center'
size
Controls the max-width of the content panel. 'full' renders as a bottom sheet spanning the full viewport width.
- size:
'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full'='md'
persistent
When persistent is set, pressing Escape does not close the modal. The user must interact with the content to dismiss it.
- persitent:
boolean=false
Without preprocess Lapikit
If you aren’t using the Lapikit preprocessor in svelte.config.js, import the components directly:
API Reference
kit:modal
| props | type | description | default |
|---|---|---|---|
| open | boolean | Controls visibility. Bindable. | false |
| persistent | boolean | Prevents closing on Escape. | false |
| contain | boolean | Positions relative to parent instead of viewport. | false |
| closeWithEsc | boolean | Closes on Escape key. | true |
| size | enum'xs''sm''md''lg''xl''full' | Max-width of the content panel. | 'md' |
| position | enum'top''center''bottom' | Vertical alignment on the viewport. | 'center' |
| density | enum'compact''default''comfortable' | Padding inside the content panel. | 'default' |
| rounded | enum0'xs''sm''md''lg''xl' | Border radius of the content panel. | 'md' |
| classContent | string | string[] | Class(es) applied to the inner content panel. | |
| color | string | Foreground color override (--kit-modal-fg). | |
| background | string | Background color override (--kit-modal-bg). | |
| children | Snippet | Modal content. |
Complement the use of kit:modal with Dialog for confirmations or Popover for light details.