#Dialog

A panel the reader has to resolve before carrying on — reach for Drawer when they should be able to keep it open and keep working, and Popover when the content is a detail rather than a task. It is Drawer with kind='dialog', which shares the panel but keeps the two families' nesting separate: a dialog only steps back for another dialog.

Source · Storybook

#Usage

import { Button } from '@wallarm-org/design-system/Button';
import { Dialog, DialogBody, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '@wallarm-org/design-system/Dialog';

#Examples

#With footer

DialogFooter holds the decision. Put the confirming action last, since that is where the eye finishes.

#With description

DialogDescription states the consequence, which is what turns a confirmation from a speed bump into a decision. DialogHeader finds the title and description among its children and stacks them, so the close button stays right-aligned however many it gets.

#With footer left actions

A left-aligned action for the escape route — cancel, learn more — kept away from the confirming pair on the right.

#Sizes

The standard widths. Pick by the content, not the importance: a wide dialog for a short question reads as a mistake.

#Custom sizes

Explicit width, minWidth and maxWidth for content the standard steps do not fit.

#Scrollable

The body scrolls while header and footer stay put, so the decision never scrolls out of reach.

#With input at edge

A field against the panel edge, which is where focus rings and shadows get clipped if the padding is wrong.

#With input at edge scrollable

The same, with scrolling — the case where a focus ring can be cut by the scroll container rather than the panel.

#With nested drawer

A drawer opened from a dialog. Different families, so neither pushes the other back; they stack.

#With nested select

A Select inside a dialog, checking that its menu escapes the panel rather than being clipped by it.

#With nested calendar

A Calendar inside a dialog, the same check for a popover that is taller than the panel.

#Controlled

Owning open, which is what you need when something outside the dialog decides it should close.

#No closable on esc

Escape disabled, for a decision that must not be dismissed by reflex. Use it sparingly — it takes away the exit readers expect.

#No overlay

Without the backdrop. The panel stops reading as blocking, which is usually the wrong signal for a dialog.

#With nested

A dialog inside a dialog: the outer one steps back so the depth is visible. Two is the most a reader can follow.

#With tabs

Tabs inside a dialog, for a task with a couple of facets — not as a way to fit a whole form into one panel.

#Props

#Explorer