Dialog

Dialogs interrupt the user flow for focused tasks or confirmations.

Examples

Basic

Sizes

Scrollable body

Overview

Dialog is a modal window that interrupts the user flow for a focused task or confirmation. Built on Base UI Dialog. For destructive confirmations, prefer AlertDialog instead.

tsx

import {
  Dialog,
  DialogTrigger,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogBody,
  DialogFooter,
  DialogClose,
} from "@rogo-technologies/ui/dialog";

<Dialog>
  <DialogTrigger>Open dialog</DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Example</DialogTitle>
    </DialogHeader>
    <DialogBody>Anything goes in the body.</DialogBody>
    <DialogFooter>
      <DialogClose>Close</DialogClose>
    </DialogFooter>
  </DialogContent>
</Dialog>;

Usage

Sizes

Use the size prop on DialogContent to control the popup width. Available sizes: sm, md, lg, xl.

tsx

<DialogContent size="sm">…</DialogContent>
<DialogContent size="lg">…</DialogContent>

Scrollable body

Wrap overflowing content in DialogBody. Scroll behavior activates automatically with edge fades enabled by default.

tsx

<DialogContent>
  <DialogHeader>
    <DialogTitle>Long content</DialogTitle>
  </DialogHeader>
  <DialogBody>{/* very tall content */}</DialogBody>
  <DialogFooter>
    <DialogClose>Done</DialogClose>
  </DialogFooter>
</DialogContent>

Composition

For full control, compose the lower-level primitives directly:

tsx

import {
  Dialog,
  DialogTrigger,
  DialogPortal,
  DialogBackdrop,
  DialogPopup,
} from "@rogo-technologies/ui/dialog";

<Dialog>
  <DialogTrigger>Open</DialogTrigger>
  <DialogPortal>
    <DialogBackdrop />
    <DialogPopup>…</DialogPopup>
  </DialogPortal>
</Dialog>;

API

Dialog (Root)

Prop	Type	Default	Description
`open`	`boolean`	—	Controlled open state.
`defaultOpen`	`boolean`	`false`	Initial open state (uncontrolled).
`onOpenChange`	`(open: boolean) => void`	—	Callback when open state changes.
`modal`	`boolean`	`true`	Whether the dialog is modal.

DialogContent

Prop	Type	Default	Description
`size`	`"sm" \| "md" \| "lg" \| "xl"`	`"md"`	Width of the dialog popup.
`showCloseButton`	`boolean`	`false`	Renders an `×` close button in the top-right.
`className`	`string`	—	Additional CSS classes for the popup.

Subcomponents

Component	Purpose
`DialogTrigger`	Button that opens the dialog.
`DialogClose`	Button that closes the dialog.
`DialogHeader`	Top section wrapper. `bordered` prop adds a divider.
`DialogTitle`	Heading element announced by screen readers.
`DialogDescription`	Optional supporting copy below the title.
`DialogBody`	Scrollable body region with edge fades.
`DialogScrollArea`	Custom scroll region wrapping `ScrollArea`.
`DialogFooter`	Bottom action row. `bordered` prop adds a divider.
`DialogPortal`	Portals the popup to the document body.
`DialogBackdrop`	Dimmed backdrop behind the popup.
`DialogPopup`	The popup container (low-level alternative to `DialogContent`).
`DialogViewport`	Viewport region for positioning.
`DialogCloseButton`	Standalone close button (used internally by `showCloseButton`).

All subcomponents accept standard HTML attributes for their underlying elements.

Guidelines

Do

Use a Dialog when a task needs the user's full attention (forms, multi-step flows, settings)
Provide a DialogTitle — it's required for screen readers
Give every dialog at least one explicit close action in the footer
Pick the smallest size that fits the content; oversized dialogs feel heavy

Don't

Don't use Dialog for destructive confirmations — use AlertDialog for those
Don't stack dialogs on top of each other; collapse them into a single flow
Don't put long forms in a sm dialog — switch to a route/page instead
Don't hide the title or skip a description when the action isn't obvious from context

PreviousCombobox

NextDropdown Menu