# Dialog > Dialog displays content that requires user interaction, via a layer that sits on top of the page content. ## Types of dialogs Modal header First Name Last Name Remember me Confirm action? This can not be undone. Modal dialog
Such dialogs can display more complex data like application forms or description of an entity. Confirmation dialog
This type of dialog is used to request a confirmation of action from a user. Just want a text notification? Try [Toaster](/components/toaster) component. ## Import ```js import { Dialog } from '@gemini-suite/vera-react'; // you may also access Dialog's context via hook: // import { useDialogContext } from '@gemini-suite/vera-react'; ``` Dialog is a compound component that consists of multiple parts to help you create all kinds of dialogs: - `Dialog.Root`: The wrapper that contains all the parts of a dialog and provides context for its children. - `Dialog.Trigger`: The button that opens the dialog. - `Dialog.Box`: The container for the dialog's content. - `Dialog.Header`: The header of the dialog. - `Dialog.Title`: The title that labels the dialog. - `Dialog.Body`: The wrapper that houses the dialog's main content. - `Dialog.Footer`: The footer that houses the dialog actions. - `Dialog.Close`: The button that closes the dialog. - `Dialog.IconCircle`: A decorative icon container used in confirmation dialogs. ## Examples ### Basic `Dialog` works in an uncontrolled way by default, meaning each `Dialog` component instance is responsible for managing its own state internally. The `Dialog.Trigger` component can be instructed via `as` prop to render _as_ something else. In our case we want to render it as a ` ``` ### Dialog with dividers Use `withDividers` prop on `Dialog.Body` to add subtle dividers between dialog sections. ```jsx {'Open Dialog'} My dialog { 'Smoked tofu homemade balsamic sesame soba noodles portobello mushrooms creamy cauliflower alfredo thyme blackberries Italian pepperoncini basil blood orange smash sriracha pecans lime summer eating together dark chocolate ultimate lavender lemonade dark and stormy mediterranean vegetables black bean wraps hot Malaysian arugula salad.' } { 'Smoked tofu homemade balsamic sesame soba noodles portobello mushrooms creamy cauliflower alfredo thyme blackberries Italian pepperoncini basil blood orange smash sriracha pecans lime summer eating together dark chocolate ultimate lavender lemonade dark and stormy mediterranean vegetables black bean wraps hot Malaysian arugula salad.' } ``` Use `useHasOverflow` hook to dynamically apply dividers only when content overflows `Dialog.Body` area. ```js import { useHasOverflow } from '@gemini-suite/vera-react'; ``` ```jsx () => { const maxCount = 8; const minCount = 1; const [count, setCount] = React.useState(2); const increment = () => setCount(c => Math.min(c + 1, maxCount)); const decrement = () => setCount(c => Math.max(c - 1, minCount)); const [bodyRef, _hasBodyHorizontalScroll, hasBodyVerticalScroll] = useHasOverflow(); return ( {'Open Dialog'} My dialog {Array.from({ length: count }, (_, i) => ( ))} ); }; ``` ### Sizes Use `size` prop to control the size of the `Dialog`. `medium` and `small` sizes are available, with the `medium` size used by default. ```jsx {'Open small dialog'} {'My small dialog'} { 'Smoked tofu homemade balsamic sesame soba noodles portobello mushrooms creamy cauliflower alfredo thyme blackberries Italian pepperoncini basil blood orange smash sriracha pecans lime summer eating together dark chocolate ultimate lavender lemonade dark and stormy mediterranean vegetables black bean wraps hot Malaysian arugula salad.' } {'Close'} {'Open medium dialog'} {'My medium dialog'} { 'Smoked tofu homemade balsamic sesame soba noodles portobello mushrooms creamy cauliflower alfredo thyme blackberries Italian pepperoncini basil blood orange smash sriracha pecans lime summer eating together dark chocolate ultimate lavender lemonade dark and stormy mediterranean vegetables black bean wraps hot Malaysian arugula salad.' } {'Close'} ``` ### Customizable width Use `width` prop to customize width of the `Dialog.Box`. It will act as a maximum width of the dialog, but if the viewport width is less than that, the dialog will shrink accordingly. ```jsx {'Open Dialog'} My dialog { 'Smoked tofu homemade balsamic sesame soba noodles portobello mushrooms creamy cauliflower alfredo thyme blackberries Italian pepperoncini basil blood orange smash sriracha pecans lime summer eating together dark chocolate ultimate lavender lemonade dark and stormy mediterranean vegetables black bean wraps hot Malaysian arugula salad.' } ``` ### Confirmation dialog example ```jsx () => { const [isSmallDialogOpen, setIsSmallDialogOpen] = React.useState(false); const [isMediumDialogOpen, setIsMediumDialogOpen] = React.useState(false); return ( {'Small confirmation dialog'} Delete these 5 events? {'This can not be undone.'} {'Cancel'} {'Medium confirmation dialog'} Success! {'Asset has been created successfully.'} ); }; ``` ### Confirmation on dialog hide You can prevent users from accidentally closing a dialog with unsaved changes by displaying a nested confirmation dialog. This can be achieved by preventing the default close behavior and programmatically opening a controlled, nested dialog. ```jsx () => { const [value, setValue] = React.useState(''); const [isPostOpen, setIsPostOpen] = React.useState(false); const [isConfirmationOpen, setIsConfirmationOpen] = React.useState(false); // reset post value if (!isPostOpen && value) { setValue(''); } const handleValueChange = event => setValue(event.target.value); const handlePostDialogClose = event => { if (value) { event.preventDefault(); setIsConfirmationOpen(true); } }; return ( {'Post message'} {'Post message'}
{ event.preventDefault(); setIsPostOpen(false); }} >