DialogContainer

Overview

DialogContainer is a flexible modal that offers a consistent way to display content.

Usage

import { DialogContainer } from "@unkey/ui";
 
export default function MyComponent() {
  const [isOpen, setIsOpen] = useState(false);
 
  return (
    <DialogContainer
      isOpen={isOpen}
      onOpenChange={setIsOpen}
      title="Example Dialog"
      subTitle="Optional subtitle text"
      footer={
        <Button onClick={handleAction}>
          Confirm
        </Button>
      }
    >
      <div>Your dialog content here</div>
    </DialogContainer>
  );
}

Examples

Basic Example

A complete example showing the DialogContainer with all its features.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

<div className="flex flex-row gap-2 justify-center">
  <div className="flex flex-col gap-2 w-[200px]">
    <Button className="text-gray-11 text-[13px]" onClick={() => setIsOpen(!isOpen)}>
      Open Dialog
    </Button>

    <DialogContainer
      isOpen={isOpen}
      onOpenChange={() => setIsOpen(!isOpen)}
      subTitle="This is an example of a subTitle. Normally used to describe the dialog"
      title="Example Dialog Title"
      footer={
        <div className="flex flex-col w-full gap-2 items-center justify-center">
          <Button
            type="submit"
            variant="primary"
            size="lg"
            className="w-full"
            onClick={() => handleSubmit()}
          >
            Submit
          </Button>
          <div className="text-error-11 text-xs">
            This is an example of a footer with a button for actions needed to be done
          </div>
        </div>
      }
    >
      <div className="flex flex-col text-gray-11 text-[13px] gap-2">
        <p>Dialog Content</p>
        <Input
          placeholder="Example Input"
          type="text"
          onChange={(e) => setInputValue(e.target.value)}
        />
      </div>
    </DialogContainer>
    <p>
      Input Result: <span className="text-success-6">{inputResult}</span>
    </p>
  </div>
</div>

Features

• Accessible Modal: Accessible modal implementation with proper ARIA attributes
• Customizable Overlay: Customizable overlay and content styling
• Close Button: Built-in close button with warning support
• Keyboard Navigation: Full keyboard navigation support
• Customizable Animations: Configurable animations and transitions
• Responsive Design: Adapts to different screen sizes
• Dark Mode Support: Consistent appearance in light and dark themes
• Predefined Structure: Header, content, and footer sections

Props

Structure

The DialogContainer is composed of three main parts:

1. Header - Contains the title and optional subtitle
2. Content Area - The main content section where children are rendered
3. Footer - Optional section for actions like buttons or additional information

Styling

The component comes with default styling that includes:

• Responsive Width: Responsive width and height constraints
• Visual Effects: Drop shadow and rounded corners
• Overlay: Overlay with backdrop blur effect
• Dark Mode: Full dark mode support
• Customizable: Extensive styling through className and contentClassName props

Custom Styling

You can customize the appearance using className props:

<DialogContainer
  isOpen={isOpen}
  onOpenChange={setIsOpen}
  title="Custom Dialog"
  className="custom-dialog-class"
  contentClassName="custom-content-class"
>
  Custom content
</DialogContainer>

Accessibility

The DialogContainer implements the following accessibility features:

• Focus Management: Manages focus trap within the dialog
• Keyboard Support: Supports keyboard navigation (Esc to close)
• ARIA Attributes: Proper ARIA attributes for screen readers
• Focus Control: Focus management can be controlled via preventAutoFocus
• Screen Reader Support: Announces dialog state changes appropriately