Dialog

A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.

Examples

Default

<script setup>
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
  Button,
  Input,
  Label
} from '@empathyds/vue'
</script>

<Dialog>
  <DialogTrigger as-child>
    <Button variant="outline">Edit Profile</Button>
  </DialogTrigger>
  <DialogContent class="sm:max-w-106.25">
    <DialogHeader>
      <DialogTitle>Edit profile</DialogTitle>
      <DialogDescription>
        Make changes to your profile here. Click save when you're done.
      </DialogDescription>
    </DialogHeader>
    <div class="grid gap-4 py-4">
      <div class="grid grid-cols-4 items-center gap-4">
        <Label for="name" class="text-right">
          Name
        </Label>
        <Input id="name" value="Pedro Duarte" class="col-span-3" />
      </div>
      <div class="grid grid-cols-4 items-center gap-4">
        <Label for="username" class="text-right">
          Username
        </Label>
        <Input id="username" value="@peduarte" class="col-span-3" />
      </div>
    </div>
    <DialogFooter>
      <Button type="submit">Save changes</Button>
    </DialogFooter>
  </DialogContent>
</Dialog>

Props

Dialog

Prop	Type	Default	Description
open	boolean	-	The controlled open state of the dialog.
defaultOpen	boolean	false	The open state of the dialog when it is initially rendered.
modal	boolean	true	The modality of the dialog.

Events

Dialog

Event	Payload	Description
update:open	boolean	Event handler called when the open state of the dialog changes.

Slots

Dialog

Slot	Description
default	The content of the dialog (Trigger, Content).

DialogTrigger

Slot	Description
default	The content of the trigger.

DialogContent

Slot	Description
default	The content of the dialog.