Modal

<vn.Modal> Import as <vn.Modal>

An accessible dialog with centered and edge-sheet layouts.

Renders as <div> Underlying HTML element

Preview

Example

<vn.Button variant="solid" onclick={() => (open = true)}>Open modal</vn.Button>

<vn.Modal bind:open={open}>
    {#snippet heading()}Settings{/snippet}
    <p>Update your notification preferences.</p>
    {#snippet footer()}
        <vn.Button variant="simple" onclick={() => (open = false)}>Cancel</vn.Button>
        <vn.Button variant="solid" onclick={() => (open = false)}>Save changes</vn.Button>
    {/snippet}
</vn.Modal>

Attributes