Dialog
Demo
Props
| Name | Type | Description |
|---|---|---|
trigger | React.ReactNode | Element that triggers the dialog/drawer. |
title | string | Optional title text for the dialog/drawer. |
description | string | Optional description text for the dialog/drawer. |
children | React.ReactNode | Content to be displayed inside the dialog/drawer. |
footer | React.ReactNode | Optional footer content for the dialog/drawer. |
classNames | { trigger?: string; content?: string; header?: string; title?: string; description?: string; footer?: string } | Custom class names for styling different parts of the dialog/drawer. |
Implementation Details
The Dialog component adapts to the screen size, using a modal dialog on desktop screens (min-width: 768px) and a drawer for smaller screens. The component leverages useMediaQuery for responsive behavior.
- On desktop, it uses
DialogRoot,DialogTrigger,DialogContent,DialogHeader,DialogTitle,DialogDescription, andDialogFooter. - On smaller screens, it switches to
DrawerRoot,DrawerTrigger,DrawerContent,DrawerHeader,DrawerTitle,DrawerDescription, andDrawerFooter.
This design provides a consistent user experience across different devices.
Styles
This component uses class names for styling, which can be customized via the classNames prop. Specific style classes include:
trigger: The trigger element's style.content: The main content area of the dialog/drawer.header: The header section of the dialog/drawer.title: The style for the title text.description: The style for the description text.footer: The footer section's style.