Dialog
A modal overlay that interrupts the user to show focused content or request a decision.
Usage
import {
Dialog,
DialogTrigger,
DialogContent,
DialogHeader,
DialogTitle,
DialogCloseButton,
DialogBody,
DialogDescription,
DialogFooter,
DialogClose,
} from '@acronis-platform/ui-react';Dialog is a compound component built on Base UI's Dialog primitive (focus trap,
scroll lock, Esc/outside-press dismissal, and ARIA come from Base UI). Dialog
owns the open state; DialogTrigger opens it; DialogContent is the portaled,
centered popup wrapping a DialogHeader (with DialogTitle + DialogCloseButton),
a DialogBody (with DialogDescription), and a DialogFooter of actions. The
trigger, close, title, and description parts are polymorphic via Base UI's
render prop. This is a design-pending v1: with no --ui-dialog-* token tier
yet, the surface, overlay, text, and border resolve to the shared semantic tokens.
Examples
A confirmation dialog:
<Dialog>
<DialogTrigger render={<Button variant="secondary">Open dialog</Button>} />
<DialogContent>
<DialogHeader>
<DialogTitle>Are you absolutely sure?</DialogTitle>
<DialogCloseButton />
</DialogHeader>
<DialogBody>
<DialogDescription>This action cannot be undone.</DialogDescription>
</DialogBody>
<DialogFooter>
<DialogClose render={<Button variant="ghost">Cancel</Button>} />
<Button variant="destructive">Delete account</Button>
</DialogFooter>
</DialogContent>
</Dialog>Controlled — drive open yourself and react to onOpenChange:
const [open, setOpen] = useState(false);
<Dialog open={open} onOpenChange={setOpen}>
<DialogContent>
<DialogHeader>
<DialogTitle>Session expired</DialogTitle>
</DialogHeader>
<DialogBody>
<DialogDescription>Please sign in again to continue.</DialogDescription>
</DialogBody>
<DialogFooter>
<Button onClick={() => setOpen(false)}>OK</Button>
</DialogFooter>
</DialogContent>
</Dialog>;Pick a width with DialogContent's size — xs (464px), sm (512px,
default), md (672px), lg (832px), xl (992px), or 2xl (1136px):
<Dialog>
<DialogTrigger render={<Button variant="secondary">Open</Button>} />
<DialogContent size="lg">
<DialogHeader>
<DialogTitle>Configure discovery agent</DialogTitle>
<DialogCloseButton />
</DialogHeader>
<DialogBody>{/* … */}</DialogBody>
</DialogContent>
</Dialog>When the dialog renders inside an isolated container (e.g. a shadow root), pass a
portalContainer so the popup inherits that scope's styles:
<DialogContent portalContainer={mountNode}>{/* … */}</DialogContent>API Reference
DialogContent
Prop
Type
Dialog (root) accepts the Base UI Dialog root props — open / defaultOpen,
onOpenChange, and modal. The remaining parts (DialogTrigger, DialogClose,
DialogTitle, DialogDescription, DialogOverlay, DialogPortal) wrap the
matching Base UI Dialog parts and accept their props (including render for
composition); DialogHeader, DialogBody, and DialogFooter accept the standard
attributes of the <div> they render. See the
Base UI Dialog docs for the full
prop surface.