Dialog

The Dialog component serves as a pop-up or modal window that overlays the main content, allowing the display of important messages, forms, or user interactions while grabbing user’s focus.

Usage

The Dialog component uses a slot-based API for its structure. Use DialogHeader, DialogContent, and DialogFooter as child components to compose your dialog:


import { Dialog, DialogHeader, DialogContent, DialogFooter } from 'reablocks';
 
<Dialog open={open} onClose={() => setOpen(false)}>
  <DialogHeader>Dialog Title</DialogHeader>
  <DialogContent>
    {/* Your content here */}
  </DialogContent>
  <DialogFooter>
    {/* Footer actions here */}
  </DialogFooter>
</Dialog>

All three slots are optional - you can use any combination of them based on your needs.

Examples

Basic Dialog

Dialog with Footer and Custom header

Custom Animation

Define custom animations for the dialog, using the animation, animationViewChange props:

Learn more about how to customize the animations in the Custom Animations section.

Theme

This component uses the following default theme:

root{}(5 keys)

Learn more about how to customize in the Theme documentation.

API

Name	Type	Default
`className`	`string` The CSS class name for the root element of the component.
`innerClassName`	`string` The CSS class name for the inner content element of the component.
`contentClassName`	`string` The CSS class name for the content of the component.
`size`	`string \| number` The size of the dialog. Can be a string or a number.	`'50%'`
`showCloseButton`	`boolean` Whether to show the close button in the dialog header.	`true`
`children`	`ReactNode \| (() => ReactNode)` The content of the dialog. Supports slot-based approach with DialogHeader, DialogContent, and DialogFooter.
`disablePadding`	`boolean` Whether to disable padding for the dialog content.	`false`
`footer`	`ReactNode` The footer of the dialog. Deprecated: Use DialogFooter slot component instead.
`header`	`ReactNode` The header of the dialog. Deprecated: Use DialogHeader slot component instead.
`headerElement`	`ReactElement<DialogHeaderProps, ForwardRefExoticComponent<DialogHeaderProps & RefAttributes<HTMLElement>>> \| null` The React element for the dialog header. Deprecated: Use DialogHeader slot component instead.	`<DialogHeader />`
`theme`	`DialogTheme` Theme for the Dialog.
`initial`	`boolean \| TargetAndTransition \| VariantLabels` Deprecated: Use animation configuration instead.
`animate`	`boolean \| TargetAndTransition \| VariantLabels` Deprecated: Use animation configuration instead.
`exit`	`TargetAndTransition \| VariantLabels` Deprecated: Use animation configuration instead.
`transition`	`Transition` Deprecated: Use animation configuration instead.
`animation`	`MotionNodeAnimationOptions` Animation configuration for the dialog.
`open`	`boolean` If true, the global overlay is open.
`closeOnBackdropClick`	`boolean` If true, the global overlay will close when the backdrop is clicked.	`true`
`hasBackdrop`	`boolean` If true, the global overlay will have a backdrop.	`true`
`backdropClassName`	`string` The CSS class name to be applied to the backdrop of the global overlay.
`closeOnEscape`	`boolean` If true, the global overlay will close when the escape key is pressed.	`true`
`onClose`	`() => void` A function that is called when the global overlay is closed.