Overlays

Dialog

Modal dialog over a scrim, for short focused tasks (rename, confirm delete, comfort settings).

• Provide open, title, onClose; optional description, children and actions (ghost Cancel, then primary). Escape and the scrim close it; focus moves in and returns on close.
• inline keeps it inside a positioned parent (previews, embeds).

Playground

Change the props, switch theme in the header, try Tablet and Phone widths, then copy the code.

Examples

Props

export interface DialogProps {
  open: boolean;
  title: string;
  description?: string;
  actions?: ReactNode;
  onClose?: () => void;
  inline?: boolean;
  children?: ReactNode
}

Use

import { Dialog } from '@visualli/design-system/components';

Source: components/src/ · Guidelines: components/catalog/Dialog/README.md