Lenso UI

Overlay component · Modal

Dialog

Accessible modal surface with composed content regions, reliable focus management, and theme-aware portals.

Live playground

Choose Dialog when

  • Use Dialog for focused decisions that temporarily interrupt the current workflow.
  • Keep the title and primary action specific to the decision being made.
  • Use the footer only when the dialog needs explicit confirmation actions.

Accessibility

  • Provide a visible title and a concise description for the modal context.
  • Let Base UI manage focus trapping, Escape dismissal, and focus restoration.
  • Keep a clear dismissal path when omitting the close control.

Implementation

Compose the component from its public parts and keep application content consumer-owned.

import { Dialog } from "@lenso/ui/dialog";

<Dialog.Root>
  <Dialog.Trigger>Open dialog</Dialog.Trigger>
  <Dialog.Portal>
    <Dialog.Backdrop />
    <Dialog.Viewport>
      <Dialog.Popup>
        <Dialog.Header>
          <Dialog.Title>Edit details</Dialog.Title>
          <Dialog.Close />
        </Dialog.Header>
        <Dialog.Body>...</Dialog.Body>
        <Dialog.Footer>...</Dialog.Footer>
      </Dialog.Popup>
    </Dialog.Viewport>
  </Dialog.Portal>
</Dialog.Root>;
Lenso UI