Dialog

@velon-finance/ui · status: stable · organism · @radix-ui/react-dialog

A modal dialog for focused, interruptive interactions. For destructive confirmations, use Alert Dialog instead. it’s intentionally harder to dismiss.

Overview

Anatomy

Part	Use
`<DialogTrigger>`	The element that opens the dialog (usually a Button via `asChild`)
`<DialogContent>`	The modal frame; renders into a portal
`<DialogHeader>`	Title + description
`<DialogTitle>`	Required for screen-reader compatibility
`<DialogDescription>`	Subtitle / context
`<DialogFooter>`	Action row

Accessibility

Always include a <DialogTitle>. Radix throws if it’s missing because screen readers need it.
ESC closes the dialog; clicking outside dismisses by default.
Focus is trapped inside the dialog while open and returns to the trigger on close.

Code

<Dialog>
  <DialogTrigger asChild><Button>Open</Button></DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>...</DialogTitle>
      <DialogDescription>...</DialogDescription>
    </DialogHeader>
    <DialogFooter>...</DialogFooter>
  </DialogContent>
</Dialog>

Quick Action Button Dialog V2