Dialog

Modal dialog component with consistent styling and animations. Based on Radix UI Dialog.

Sizes

Small

512px max width

Props:
{ size: "sm" }

Default

640px max width

Props:
{ size: "default" }

Large

768px max width

Props:
{ size: "lg" }

Common Use Cases

Confirmation Dialog

Simple yes/no confirmation

Props:
{ size: "sm" }

Form Dialog

Dialog with form inputs

Props:
{}

Scrollable Content

Dialog with long scrollable content

Props:
{ size: "lg" }

Prevent Outside Close

Dialog that prevents closing by clicking outside

Props:
{ preventOutsideClose: true }

Controlled Mode

Controlled Dialog

Programmatically control dialog state

Props:
{ open: "controlled", onOpenChange: "setControlled" }
State: Closed

Usage Guidelines

  • •Three size variants: sm (512px), default (640px), lg (768px)
  • •Use DesignDialogBody for scrollable content areas
  • •Set preventOutsideClose for critical actions
  • •Use controlled mode when you need programmatic control
  • •Always provide a cancel action in DesignDialogFooter
  • •Keep dialog titles concise (under 50 characters)
  • •Use descriptions to provide context or instructions
  • •Maximum height is 90vh to ensure visibility on all screen sizes

Footer Button Design Rules

  • •Button Size: Always use size="large" for footer buttons (40px height)
  • •Button Alignment: Buttons are automatically aligned to the right on desktop, stacked on mobile
  • •Button Order: Place secondary button first (left), primary button last (right)
  • •Primary Button: Use variant="primary" for the main action (e.g., Confirm, Submit, Save)
  • •Secondary Button: Use variant="tertiary" for secondary actions (e.g., Cancel, Back)
  • •Gap: 8px gap between buttons (automatically handled by DesignDialogFooter)

Import and Usage:

import {
  DesignDialog,
  DesignDialogContent,
  DesignDialogHeader,
  DesignDialogTitle,
  DesignDialogDescription,
  DesignDialogBody,
  DesignDialogFooter,
  DesignDialogTrigger,
  DesignDialogClose,
} from "@/components/ui/design-dialog"
import { DesignButton } from "@/components/ui/design-button"

<DesignDialog>
  <DesignDialogTrigger asChild>
    <DesignButton variant="primary">Open Dialog</DesignButton>
  </DesignDialogTrigger>
  <DesignDialogContent>
    <DesignDialogHeader>
      <DesignDialogTitle>Dialog Title</DesignDialogTitle>
      <DesignDialogDescription>
        Dialog description
      </DesignDialogDescription>
    </DesignDialogHeader>
    <DesignDialogBody>
      {/* Content */}
    </DesignDialogBody>
    <DesignDialogFooter>
      <DesignDialogClose asChild>
        <DesignButton variant="tertiary" size="large">Cancel</DesignButton>
      </DesignDialogClose>
      <DesignDialogClose asChild>
        <DesignButton variant="primary" size="large">Confirm</DesignButton>
      </DesignDialogClose>
    </DesignDialogFooter>
  </DesignDialogContent>
</DesignDialog>