Skip to main content

Dialog

Storybook​

Go to Story

Dialog​

const Dialog: FC<DialogProps> = DialogPrimitive.Root;

Defined in: src/components/Dialog/Dialog.tsx:67

Main wrapper for Dialog functionality.

Dialogs are used to present content that requires user interaction while temporarily blocking interaction with the main content.

Dialogs are composed using smaller components to ensure high customization yet maintaining consistency.

Built on top of radix-ui Dialog

Examples​

// Basic usage with DialogTrigger
<Dialog>
  <DialogTrigger>Open Settings</DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Settings</DialogTitle>
      <DialogDescription>
        Configure your application preferences
      </DialogDescription>
    </DialogHeader>
    <div className="space-y-4">
      content
    </div>
    <DialogFooter>
      <Button variant="outline">Reset</Button>
      <Button>Save Changes</Button>
    </DialogFooter>
  </DialogContent>
</Dialog>
// Controlled dialog
const [open, setOpen] = useState(false);

<Dialog open={open} onOpenChange={setOpen}>
  <DialogTrigger>View Profile</DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>User Profile</DialogTitle>
    </DialogHeader>
    <div className="space-y-4">
      content
    </div>
  </DialogContent>
</Dialog>

DialogTrigger​

const DialogTrigger: ForwardRefExoticComponent<DialogTriggerProps & RefAttributes<HTMLButtonElement>> = DialogPrimitive.Trigger;

Defined in: src/components/Dialog/Dialog.tsx:69

DialogPortal​

const DialogPortal: FC<DialogPortalProps> = DialogPrimitive.Portal;

Defined in: src/components/Dialog/Dialog.tsx:71

DialogClose​

const DialogClose: ForwardRefExoticComponent<DialogCloseProps & RefAttributes<HTMLButtonElement>> = DialogPrimitive.Close;

Defined in: src/components/Dialog/Dialog.tsx:73

DialogCloseX()​

function DialogCloseX(__namedParameters): Element;

Defined in: src/components/Dialog/Dialog.tsx:88

A styled close button with an X icon for Dialog components. Positioned in the top-right corner of a Dialog by default.

Parameters​

ParameterType
__namedParametersDialogCloseProps & RefAttributes<HTMLButtonElement>

Returns​

Element

Example​

<DialogContent>
  <DialogTitle>Settings</DialogTitle>
  <DialogCloseX />
  <p>Dialog content...</p>
</DialogContent>

DialogOverlay()​

function DialogOverlay(__namedParameters): Element;

Defined in: src/components/Dialog/Dialog.tsx:108

Displays overlay behind the main dialog content. Necessary to achieve dialog's modality.

Parameters​

ParameterType
__namedParametersDialogOverlayProps & RefAttributes<HTMLDivElement>

Returns​

Element

DialogContentElement()​

function DialogContentElement(__namedParameters): Element;

Defined in: src/components/Dialog/Dialog.tsx:135

Ready to use DialogContent. Provides default modality styling and size constraints. .

Parameters​

ParameterType
__namedParametersDialogContentElementProps

Returns​

Element

DialogContent()​

function DialogContent(__namedParameters): Element;

Defined in: src/components/Dialog/Dialog.tsx:180

The main content container for the Dialog. Provides complete Dialog experience with reasonable defaults.

Handles portal, overlay, size constraints, close button, centered positioning, animations. If Dialog has more specified needs, it has to opt out from this component and use primitives directly.

Parameters​

ParameterType
__namedParametersDialogContentProps

Returns​

Element

Examples​

// Basic usage
<DialogContent>
  <DialogTitle>Dialog Title</DialogTitle>
  <p>Dialog content</p>
</DialogContent>
// With custom size
<DialogContent size="sm">
  <DialogTitle>Small Dialog</DialogTitle>
</DialogContent>

DialogHeader()​

function DialogHeader(__namedParameters): Element;

Defined in: src/components/Dialog/Dialog.tsx:208

Container for dialog header elements.

Typically contains DialogTitle and optionally DialogDescription components.

Parameters​

ParameterType
__namedParametersDetailedHTMLProps<HTMLAttributes<HTMLDivElement>>

Returns​

Element

Example​

<DialogHeader>
  <DialogTitle>Settings</DialogTitle>
  <DialogDescription>Configure your preferences</DialogDescription>
</DialogHeader>

DialogFooter()​

function DialogFooter(__namedParameters): Element;

Defined in: src/components/Dialog/Dialog.tsx:237

Container for Dialog footer elements.

Provides consistent spacing and layout for dialog actions like buttons. On mobile, buttons are stacked with primary action on top. On desktop, buttons are placed side-by-side with right alignment.

Parameters​

ParameterType
__namedParametersDetailedHTMLProps<HTMLAttributes<HTMLDivElement>>

Returns​

Element

Example​

<DialogFooter>
  <Button variant="outline">Cancel</Button>
  <Button>Save Changes</Button>
</DialogFooter>

DialogTitle()​

function DialogTitle(__namedParameters): Element;

Defined in: src/components/Dialog/Dialog.tsx:270

Title component for Dialog.

Automatically sets the correct ARIA attributes for accessibility. Renders a semantically marked heading for the dialog content. Required for accessibility but can be visually hidden if necessary.

Parameters​

ParameterType
__namedParametersDialogTitleProps & RefAttributes<HTMLHeadingElement>

Returns​

Element

Examples​

<DialogTitle>Account Settings</DialogTitle>
// hidden visually
<DialogTitle className="hidden">Account Settings</DialogTitle>

DialogDescription()​

function DialogDescription(__namedParameters): Element;

Defined in: src/components/Dialog/Dialog.tsx:295

Description component for Dialog.

Provides additional context or explanation below the DialogTitle. Automatically sets the correct ARIA attributes for accessibility. Rendered with muted styling to create visual hierarchy.

Parameters​

ParameterType
__namedParametersDialogDescriptionProps & RefAttributes<HTMLParagraphElement>

Returns​

Element

Example​

<DialogDescription>
  Make changes to your profile information. Your data will be updated across all services.
</DialogDescription>