Dialog

A modal dialog built on Base UI Dialog, with a fixed header, body, and footer layout.

Installation

import { Dialog } from "@o/pipeline/experimental/components/dialog";

Usage

Pass skipEntranceAnimation on Dialog.Root when opening via a keyboard shortcut, not when you click a trigger. See CommandMenu.

Implementation

Anatomy

The Dialog component is built on the Base UI Dialog component, with additional parts:

• Dialog.Root
• Dialog.Trigger: primitive button that opens the dialog, customizable through the render prop.
• Dialog.Portal
  • Dialog.Backdrop
  • Dialog.Viewport
  • Dialog.Popup
    • Dialog.Header
      • Dialog.HeaderClose
    • Dialog.Body
      • Dialog.Title: obligatory, but can be set to visuallyHidden
      • Dialog.Description: optional, can be set to visuallyHidden
    • Dialog.Footer
      • Dialog.FooterAction - can contain more than one action
    • Dialog.Close: primitive close action that Dialog.HeaderClose extends, customizable through the render prop.

Layout

Dialog’s core layout is fixed and non-customizable; the Dialog.Header, Dialog.Body, and Dialog.Footer will always render in the same order.

Dialog.Header and Dialog.Footer always render Dialog.HeaderClose and Dialog.FooterAction in the same position, regardless of additional content.

Intent

Default

Danger

Examples

Dynamic content