Dialog
A modal window overlaid on the page, built on Bits UI.
<script lang="ts">
import {
Dialog,
DialogTrigger,
DialogContent,
DialogHeader,
DialogTitle,
DialogDescription,
DialogFooter,
DialogClose
} from "$lib/components/ui/dialog";
import { Button } from "$lib/components/ui/button";
</script>
<Dialog>
<DialogTrigger>
{#snippet child({ props })}
<Button {...props}>Open dialog</Button>
{/snippet}
</DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle>Delete project</DialogTitle>
<DialogDescription>
This action cannot be undone. This will permanently delete your project.
</DialogDescription>
</DialogHeader>
<DialogFooter>
<DialogClose>
{#snippet child({ props })}
<Button variant="ghost" {...props}>Cancel</Button>
{/snippet}
</DialogClose>
<Button variant="destructive">Delete</Button>
</DialogFooter>
</DialogContent>
</Dialog>Installation
Install the lily base and `utils` (run once per project).
npx lily-svelte@latest initCopy the dialog source from the registry into $lib/components/ui/dialog.
Usage
<script lang="ts">
import {
Dialog,
DialogTrigger,
DialogContent,
DialogHeader,
DialogTitle,
DialogDescription
} from '$lib/components/ui/dialog';
import { Button } from '$lib/components/ui/button';
</script>
<Dialog>
<DialogTrigger>
{#snippet child({ props })}
<Button {...props}>Open</Button>
{/snippet}
</DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle>Are you sure?</DialogTitle>
<DialogDescription>This action cannot be undone.</DialogDescription>
</DialogHeader>
</DialogContent>
</Dialog>