Dialog
A generic customizable dialog component for displays modal content on a page, typically used for alerts, confirmations, or custom forms.
View source
<script lang="ts">
import { Dialog, Button } from 'svxui';
let isOpen = $state(false)
</script>
<Button onclick={() => (isOpen = true)}>
Open dialog
</Button>
<Dialog bind:isOpen>Dialog content</Dialog>API Reference
| Property | Type | Default | Description |
|---|---|---|---|
children Snippet | Snippet<[void]> | Dialog content to render | |
closeOnBackdropClick | boolean | true | Close dialog on backdrop click |
closeOnEscape | boolean | true | Close dialog on escape key |
elementRef $bindable | HTMLDivElement | Rendered DOM element | |
fullScreen | boolean | false | Open as fullscreen dialog |
height | string | CSS height of dialog | |
isOpen $bindable | boolean | false | Manage/listen open state |
lockScroll | boolean | false | Lock body scroll when open |
maxHeight | string | CSS max-height of dialog | |
maxWidth | string | CSS max-width of dialog | |
minHeight | string | CSS min-height of dialog | |
minWidth | string | CSS min-width of dialog | |
noPadding | boolean | false | Disable dialog padding |
onClose | () => void | Callback when dialog is closed | |
radius | union | Dialog border radius | |
size | union | "3" | Dialog size |
transitionDelay | number | 0 | Transition delay of open/close animation |
transitionDuration | number | 150 | Transition duration of open/close animation |
width | string | CSS width of dialog |
Examples
Sizes
<script lang="ts">
import { Dialog, Button } from 'svxui';
const isOpenList = $state([false, false, false, false])
const sizes = ["1", "2", "3", "4"]
</script>
{#each sizes as size, i (i)}
<Button onclick={() => (isOpenList[i] = true)}>
Open size {size}
</Button>
<Dialog bind:isOpen={isOpenList[i]} {size}>Dialog content size {size}</Dialog>
{/each}