1<script lang="ts"> 2 import { buttonVariants } from '../button/button.variants.js'; 3 import Button from '../button/button.svelte'; 4 import { Input } from '../input/index.js'; 5 import * as Dialog from './index.js'; 6</script> 7 8<Dialog.Root> 9 <form> 10 <Dialog.Trigger type="button" class={buttonVariants({ variant: 'outline' })}> 11 Open Dialog 12 </Dialog.Trigger> 13 <Dialog.Content class="sm:max-w-[425px]"> 14 <Dialog.Header> 15 <Dialog.Title>Edit profile</Dialog.Title> 16 <Dialog.Description> 17 Make changes to your profile here. Click save when you're done. 18 </Dialog.Description> 19 </Dialog.Header> 20 <div class="grid gap-4"> 21 <div class="grid gap-3"> 22 <label for="name-preview" class="text-sm font-medium">Name</label> 23 <Input id="name-preview" name="name" value="Pedro Duarte" /> 24 </div> 25 <div class="grid gap-3"> 26 <label for="username-preview" class="text-sm font-medium">Username</label> 27 <Input id="username-preview" name="username" value="@peduarte" /> 28 </div> 29 </div> 30 <Dialog.Footer> 31 <Dialog.Close type="button" class={buttonVariants({ variant: 'outline' })}> 32 Cancel 33 </Dialog.Close> 34 <Button type="submit">Save changes</Button> 35 </Dialog.Footer> 36 </Dialog.Content> 37 </form> 38</Dialog.Root> 39

Installation

Usage

Use dialog for modal confirmation and focused tasks. Compose with trigger, content, header, and footer.

1<script lang="ts">
2	import * as Dialog from '~/components/dialog';
3	import { Button, buttonVariants } from '~/components/button';
4</script>
5
6<Dialog.Root>
7	<form>
8		<Dialog.Trigger type="button" class={buttonVariants({ variant: 'outline' })}>
9			Open Dialog
10		</Dialog.Trigger>
11		<Dialog.Content class="sm:max-w-[425px]">
12			<Dialog.Header>
13				<Dialog.Title>Edit profile</Dialog.Title>
14				<Dialog.Description>
15					Make changes to your profile here. Click save when you're done.
16				</Dialog.Description>
17			</Dialog.Header>
18			<Dialog.Footer>
19				<Dialog.Close type="button" class={buttonVariants({ variant: 'outline' })}>
20					Cancel
21				</Dialog.Close>
22				<Button type="submit">Save changes</Button>
23			</Dialog.Footer>
24		</Dialog.Content>
25	</form>
26</Dialog.Root>