Dialog

The Dialog component provides a modal window that can be used to present information or prompt the user for a decision. It appears on top of the main content, temporarily interrupting the user’s workflow.

Usage

<script>
  import { 
    Dialog, 
    DialogTrigger, 
    DialogContent, 
    DialogHeader, 
    DialogTitle, 
    DialogDescription, 
    DialogFooter, 
    DialogClose 
  } from "$lib/components/ui/dialog";
  import { Button } from "$lib/components/ui/button";
</script>

<Dialog>
  <DialogTrigger>
    <Button>Open Dialog</Button>
  </DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Dialog Title</DialogTitle>
      <DialogDescription>Dialog Description</DialogDescription>
    </DialogHeader>
    <p>Dialog content goes here.</p>
    <DialogFooter>
      <DialogClose>
        <Button variant="outline">Cancel</Button>
      </DialogClose>
      <Button>Save</Button>
    </DialogFooter>
  </DialogContent>
</Dialog>

Examples

Basic Dialog

A simple dialog with header, content, and footer.

      <Dialog>
  <DialogTrigger>
    <Button>Open Dialog</Button>
  </DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Edit Profile</DialogTitle>
      <DialogDescription>Make changes to your profile here.</DialogDescription>
    </DialogHeader>
    <div class="py-4">
      <p>Content goes here. You might add form fields, text, or other elements.</p>
    </div>
    <DialogFooter>
      <DialogClose>
        <Button variant="outline">Cancel</Button>
      </DialogClose>
      <Button>Save changes</Button>
    </DialogFooter>
  </DialogContent>
</Dialog>

Alert Dialog

A dialog for confirming actions with potentially destructive consequences.

      <Dialog>
  <DialogTrigger>
    <Button variant="destructive">Delete Account</Button>
  </DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Are you absolutely sure?</DialogTitle>
      <DialogDescription>
        This action cannot be undone. This will permanently delete your account
        and remove your data from our servers.
      </DialogDescription>
    </DialogHeader>
    <DialogFooter>
      <DialogClose>
        <Button variant="outline">Cancel</Button>
      </DialogClose>
      <Button variant="destructive">Delete Account</Button>
    </DialogFooter>
  </DialogContent>
</Dialog>

Minimal Dialog

A dialog with minimal content, useful for simple confirmations.

      <Dialog>
  <DialogTrigger>
    <Button variant="outline">Show Message</Button>
  </DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Success!</DialogTitle>
    </DialogHeader>
    <div class="flex items-center justify-center py-6">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-24 text-green-500"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>
    </div>
    <DialogFooter>
      <DialogClose>
        <Button class="w-full">Dismiss</Button>
      </DialogClose>
    </DialogFooter>
  </DialogContent>
</Dialog>

API Reference

Dialog Components

Component	Description
`Dialog`	The root component that manages dialog state.
`DialogTrigger`	The button that opens the dialog.
`DialogContent`	The container for dialog content with built-in animations.
`DialogHeader`	A container for dialog heading elements.
`DialogTitle`	The title component for the dialog.
`DialogDescription`	A description component providing more details about the dialog’s purpose.
`DialogFooter`	The bottom section of the dialog, typically containing action buttons.
`DialogClose`	A component that closes the dialog when clicked.

Component Properties

Component	Properties	Description
`Dialog`	`open`, `onOpenChange`	Controls the open state of the dialog.
`DialogContent`	`class`	Additional CSS classes for the content container.
`DialogTrigger`	Standard button properties	Accepts all standard button properties.
`DialogClose`	Standard button properties	Accepts all standard button properties.

Implementation

The Dialog component is built on top of bits-ui primitives and uses Svelte’s transition animations for a smooth user experience:

// Example of DialogContent styling
'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg duration-200 sm:rounded-lg'

// DialogHeader styling
'flex flex-col space-y-1.5 text-center sm:text-left'

// DialogFooter styling
'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2'