Dialog
A modal window overlaid on the page, built on Bits UI.
Installation
Installs the style saved in lily.json. For a new Diamond project,
run lily-svelte init --style diamond first.
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>