operate ˗ˏˋ design ˎˊ-

© 2026 Operate Machine, Co.

Dialog

Installation

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

Usage

Pass skipEntranceAnimation on Dialog.Root when opening via a keyboard shortcut — not when the user clicks a trigger. See CommandMenu.

Implementation

Anatomy

Our Dialog component is built upon the Base UI Dialog component, with additional components:

  • Dialog.Root
  • Dialog.Trigger - primitive button that opens the dialog. Fully customizable via 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 upon. Fully customizable via 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.

Additionally, Dialog.Header and Dialog.Footer’s contents will ensure Dialog.HeaderClose and Dialog.FooterAction are always rendered in the same position, regardless of additional content.

Intent

Default

Danger

Examples

Dynamic Content