Breaking news
Modals are used to display important information or prompts to the user.
Getting Started
Place this anywhere in your app
svelte
Loading...The modal can exist in two modes: static and dynamic.
- Static Mode
- Dynamic Mode
svelte
Loading...Used to render custom UI such as inputs, forms, or any arbitrary markup inside the modal.
svelte
Loading...Component API
Use modalStore.update() for optional properties to keep defaults
Component API
| Prop | Type | Default | Description |
|---|---|---|---|
| open | boolean | false | Decides if the modal is open |
| title | string | "" | (Required) |
| titleFont, titleFontSize, titleFontWeight | string | inherit, 1.3rem, inherit | Title styles |
| logo_url, logo_url_size, logo_url_spacing | string | "", 30px, 1rem | Logo styles |
| content | string | "" | (Optional) |
| confirmText | string | 'Confirm' | (Optional) |
| cancelText | string | 'Cancel' | (Optional) |
| onConfirm | function | void | Callback function when the confirm button is clicked. |
| onCancel | function | void | Callback function when the cancel button is clicked. (optional). |
| render | () => Snippet | null | Function that returns dynamic modal content. Used to render custom UI such as inputs, forms, or any arbitrary markup inside the modal. (Optional) |
Edit Page