SaaS Dialog

Modal dialog overlay with header and footer

SaaSOverlay

Overview

Dialog is a composable modal overlay built on Radix UI Dialog primitive. It includes Header, Footer, Title, Description, Trigger, Close, and Content sub-components for flexible dialog composition.

Usage

import {
  Dialog,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@leanicon/web-builder-library/saas";

<Dialog>
  <DialogTrigger asChild>
    <button>Open Dialog</button>
  </DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Dialog Title</DialogTitle>
      <DialogDescription>Dialog description text.</DialogDescription>
    </DialogHeader>
    <DialogFooter>
      <DialogClose asChild>
        <button>Cancel</button>
      </DialogClose>
      <button>Confirm</button>
    </DialogFooter>
  </DialogContent>
</Dialog>;

Variants

Default

Dark

Form

Props

NameTypeDefaultRequiredDescription
asChildboolean—No