Dialog

A modal dialog component with customizable sizes

Overview

The Dialog component provides a modal overlay for displaying content that requires user interaction to proceed. It can be useful for guiding the user through a form, or focusing their attention away from the rest of the app.

Usage

Import the dialog components:

import {
  Dialog,
  DialogContainer,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogFooter,
} from "@eqtylab/equality";

Basic usage with required properties:

import { useState } from "react";

const [isOpen, setIsOpen] = useState(false);

<Dialog open={isOpen} onOpenChange={setIsOpen}>
  <DialogContainer>
    <DialogHeader>
      <DialogTitle>Dialog Title</DialogTitle>
      <DialogDescription>Dialog description text</DialogDescription>
    </DialogHeader>
    <DialogContent>Your content here</DialogContent>
    <DialogFooter>
      <Button onClick={() => setIsOpen(false)}>Close</Button>
    </DialogFooter>
  </DialogContainer>
</Dialog>;

Size Variants

The dialog component supports three size variants for controlling its maximum width: small, medium, and large. Set the size using the size prop on DialogContainer. By default, the dialog uses the medium size.

Small

Recommended for compact dialogs (max width: 32rem / 512px).

<DialogContainer size="sm">...</DialogContainer>

Medium (default)

Recommended for typical dialog uses (max width: 42rem / 672px).

<DialogContainer size="md">...</DialogContainer>

Large

Recommended for dialogs that need extra horizontal space (max width: 56rem / 896px).

<DialogContainer size="lg">...</DialogContainer>

Scrolling Content

The dialog component enforces a maximum height of 85% of the viewport (85vh). If the dialog content exceeds this height, a vertical scrollbar will appear inside the DialogContent area, allowing users to scroll through overflowing content without affecting the background page.

Nested Content

You can nest other components like cards within the dialog content area. The DialogContent component provides proper spacing and scrolling behavior.

Slots

The Dialog component is composed of several sub-components:

Name	Description
`Dialog`	Root component that manages the dialog state
`DialogContainer`	The dialog content wrapper with size variants
`DialogHeader`	Header section containing title, description, and close button
`DialogTitle`	The dialog’s title (required for accessibility)
`DialogDescription`	Optional description text
`DialogContent`	Scrollable content area for the dialog body
`DialogFooter`	Footer section typically containing action buttons
`DialogTrigger`	Button or element that opens the dialog
`DialogClose`	Element that closes the dialog when clicked

Props

DialogContainer

Name	Description	Type	Default	Required
`size`	Controls the maximum width of the dialog	`sm`, `md`, `lg`	`md`	❌
`children`	Dialog content including header, body, and footer	`ReactNode`	-	✅

Dialog

Name	Description	Type	Default	Required
`open`	Controls whether the dialog is open	`boolean`	-	✅
`onOpenChange`	Callback when the dialog open state changes	`(open: boolean) => void`	-	✅

DialogTitle

Name	Description	Type	Default	Required
`children`	The title text	`ReactNode`	-	✅