Dialog

A modal surface for focused tasks and short-form workflows.

The Dialog Component

Basic Usage

Code Snippet

1<script lang="ts">2		import { Button, Dialog } from '$lib/components';3 4		let open = $state(false);5	</script>6 7	<Button onclick={() => (open = true)}>Invite teammates</Button>8 9	<Dialog bind:open={open} title="Invite teammates" description="Share access with your launch team.">10		<p class="text-sm text-app-text-muted">Send invites by email or paste a workspace link.</p>11	</Dialog>

Examples

Large Dialog

Use larger widths when the task needs more comparison or detail.