Dialog

Modal dialog overlay

UI PrimitiveFeedback

Overview

A compound component built on Radix UI's Dialog primitive. Includes animated overlay, zoom-in content, and an optional close button in the top-right corner.

Usage

import { Dialog } from "@leanicon/web-builder-library";

<Dialog>
  <Dialog.Trigger asChild>
    <button>Open</button>
  </Dialog.Trigger>
  <Dialog.Content>
    <Dialog.Header>
      <Dialog.Title>Title</Dialog.Title>
      <Dialog.Description>Description</Dialog.Description>
    </Dialog.Header>
    <p>Body content</p>
    <Dialog.Footer showCloseButton>
      <button>Confirm</button>
    </Dialog.Footer>
  </Dialog.Content>
</Dialog>;

Notes

  • Dialog.Content renders inside a portal via Dialog.Portal.
  • The overlay uses bg-overlay/50 — ensure --color-overlay is defined in your theme.
  • Dark mode is handled via semantic tokens.

Props

NameTypeDefaultRequiredDescription
asChildboolean—No
showCloseButtonbooleantrueNo