Dialog

A Dialog is a modal surface that appears above the main interface to capture the user’s attention

Basic Usage

A Dialog is a modal surface that appears above the main interface to capture the user’s attention

import { Dialog, DialogTrigger, DialogContent, DialogPortal, DialogFooter, DialogClose, Button, DialogHeader, DialogTitle, DialogDescription } from "@epilot/volt-ui"

<div className="flex flex-col gap-4">
  <Dialog>
    <DialogTrigger asChild>
      <Button variant="outline">Open</Button>
    </DialogTrigger>
    <DialogPortal container={document.getElementById("root")}>
      <DialogOverlay />
      <DialogContent size="2xl">
        <DialogHeader>
          <DialogTitle>Edit profile</DialogTitle>
          <DialogDescription>
            Make changes to your profile here. Click save when you&apos;re
            done.
          </DialogDescription>
        </DialogHeader>
        <form className="flex flex-col gap-4 w-full">
          <div className="flex gap-4">
            <Label className="w-1/4">Full Name</Label>
            <input className="w-full border rounded-lg p-2" type="text" placeholder="John Doe" />
          </div>
          <div className="flex gap-4">
            <Label className="w-1/4">Email</Label>
            <input className="w-full border rounded-lg p-2" type="email" placeholder="john.doe@example.com" />
          </div>
        </form>
        <DialogFooter>
          <DialogClose asChild>
            <Button variant="secondary">Cancel</Button>
          </DialogClose>
          <Button type="submit">Save changes</Button>
        </DialogFooter>
      </DialogContent>
    </DialogPortal>
  </Dialog>
</div>

API Reference

Dialog

The root component that wraps the dialog trigger and content.

Prop	Type	Default	Description
`open`	boolean	-	Controlled open state of the dialog.
`defaultOpen`	boolean	`false`	Uncontrolled default open state.
`onOpenChange`	(open: boolean) => void	-	Callback fired when the open state changes.
`modal`	boolean	`true`	When true, focus is trapped within the dialog and outside interaction is disabled.

DialogTrigger

The element that triggers the dialog. Use asChild to merge props with a child element.

Prop	Type	Default	Description
`asChild`	boolean	`false`	When true, merges props with the child element instead of rendering a button.

DialogPortal

The portal component that renders the dialog content outside the DOM hierarchy.

Prop	Type	Default	Description
`container`	Element / DocumentFragment	-	The container to render the portal in. Recommended to use your MFE root element (e.g., `document.getElementById("epilot360-entity")`) instead of `document.body` to avoid conflicts.
`forceMount`	boolean	`false`	When true, the dialog content is always mounted.

DialogOverlay

The backdrop overlay that appears behind the dialog content.

Prop	Type	Default	Description
`className`	string	-	Additional CSS classes to apply to the overlay.

DialogHeader

A container component for the dialog title and description.

Prop	Type	Default	Description
`className`	string	-	Additional CSS classes to apply to the header container.

DialogTitle

The title element for the dialog. Required for accessibility.

Prop	Type	Default	Description
`className`	string	-	Additional CSS classes to apply to the title.

DialogDescription

The description element for the dialog. Provides additional context about the dialog.

Prop	Type	Default	Description
`className`	string	-	Additional CSS classes to apply to the description.

DialogClose

A button element that closes the dialog when clicked. Use asChild to merge props with a child element.

Prop	Type	Default	Description
`asChild`	boolean	`false`	When true, merges props with the child element instead of rendering a button.
`className`	string	-	Additional CSS classes to apply to the close button.

Body

DialogContent

The main content container for the dialog. Automatically includes a portal and overlay.

Prop	Type	Default	Description
`size`	"sm" \| "md" \| "lg" \| "xl" \| "2xl" \| "3xl" \| "4xl" \| "5xl" \| "full-width"	`"lg"`	The size variant of the dialog content.
`showCloseButton`	boolean	`true`	When true, displays a close button in the top-right corner.
`className`	string	-	Additional CSS classes to apply to the dialog content.

DialogFooter

A container component for dialog action buttons.

Prop	Type	Default	Description
`className`	string	-	Additional CSS classes to apply to the footer container.

Dialog

On this page