Modal

Modals are flexible dialog prompts.

<script>
    import {Button, Modal} from 'svelte-spectre'

    let open = false
</script>

<Button on:click={() => open = !open}>Open Modal</Button>

<Modal bind:open>
    <h3 slot="header">Modal header</h3>
    <div class="content">Modal content</div>
    <p slot="footer">Modal footer</p>
</Modal>
© 2022 — 2023 BASF SE

API Modal

<slot>: HTMLelement | SvelteComponent
Modal body
HTMLelement | SvelteComponent
<slot name="header">: HTMLelement | SvelteComponent
Modal header
HTMLelement | SvelteComponent
<slot name="footer">: HTMLelement | SvelteComponent
Modal footer
HTMLelement | SvelteComponent
size: Size = "md"
Modal size
sm | md | lg | fs
open: boolean = false
Modal open state
true | false
custom: boolean = true
Modal custom
true | false
on:close={() => event}
Modal close event
true | false