Dialog

Modal dialog overlay via Radix UI

Default

Usage

import { Dialog, DialogTrigger, DialogPortal, DialogClose, DialogOverlay, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription } from '@tryvienna/ui'

<Dialog>
  <DialogTrigger asChild>
    <Button variant="outline">Open Dialog</Button>
  </DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Edit Profile</DialogTitle>
      <DialogDescription>Make changes to your profile here.</DialogDescription>
    </DialogHeader>
    <div className="grid gap-4 py-4">
      <div className="grid gap-2">
        <Label htmlFor="name">Name</Label>
        <Input id="name" defaultValue="Will" />
      </div>
      <div className="grid gap-2">
        <Label htmlFor="username">Username</Label>
        <Input id="username" defaultValue="@will" />
      </div>
    </div>
    <DialogFooter>
      <Button>Save changes</Button>
    </DialogFooter>
  </DialogContent>
</Dialog>

Examples

Default

Default

<Dialog>
  <DialogTrigger asChild>
    <Button variant="outline">Open Dialog</Button>
  </DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Edit Profile</DialogTitle>
      <DialogDescription>Make changes to your profile here.</DialogDescription>
    </DialogHeader>
    <div className="grid gap-4 py-4">
      <div className="grid gap-2">
        <Label htmlFor="name">Name</Label>
        <Input id="name" defaultValue="Will" />
      </div>
      <div className="grid gap-2">
        <Label htmlFor="username">Username</Label>
        <Input id="username" defaultValue="@will" />
      </div>
    </div>
    <DialogFooter>
      <Button>Save changes</Button>
    </DialogFooter>
  </DialogContent>
</Dialog>

Simple

Simple

<Dialog>
  <DialogTrigger asChild>
    <Button>Simple Dialog</Button>
  </DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Are you sure?</DialogTitle>
      <DialogDescription>This action cannot be undone.</DialogDescription>
    </DialogHeader>
    <DialogFooter>
      <Button variant="outline">Cancel</Button>
      <Button>Continue</Button>
    </DialogFooter>
  </DialogContent>
</Dialog>

API Reference

Dialog

Also accepts all props from DialogPrimitive.Root.

DialogTrigger

Also accepts all props from DialogPrimitive.Trigger.

DialogPortal

Also accepts all props from DialogPrimitive.Portal.

DialogClose

Also accepts all props from DialogPrimitive.Close.

DialogOverlay

Also accepts all props from DialogPrimitive.Overlay.

DialogContent

Prop	Type	Default	Description
showCloseButton	boolean	true
onEscapeKeyDownProp	((event: KeyboardEvent) => void) | undefined	-

Also accepts all props from DialogPrimitive.Content.

DialogHeader

Also accepts all props from div.

DialogFooter

Also accepts all props from div.

DialogTitle

Also accepts all props from DialogPrimitive.Title.

DialogDescription

Also accepts all props from DialogPrimitive.Description.

Data Attributes

Component	data-slot
Dialog	"dialog-content"
DialogTrigger	"dialog-trigger"
DialogPortal	"dialog-portal"
DialogClose	"dialog-close"
DialogOverlay	"dialog-overlay"
DialogContent	"dialog-content"
DialogHeader	"dialog-header"
DialogFooter	"dialog-footer"
DialogTitle	"dialog-title"
DialogDescription	"dialog-description"