Dialog

Overview

The Dialog component is a styled modal shell for any content passed to DialogContent. Pair Dialog with DialogContent and control visibility with open and onOpenChange.

Screen-reader-only title and description props on DialogContent provide accessible names and instructions. Visible content comes from children.

Examples

Basic Usage

Wrap a trigger and DialogContent in Dialog. Pass returnFocusRef so focus returns to the element that opened the dialog when it closes.

Behavior

• Dismissal: Users can close the dialog with the close button, by clicking the overlay, or by pressing Escape.
• Focus management: When returnFocusRef is provided, focus returns to that element on close via onCloseAutoFocus.
• Accessible naming: DialogContent renders title and description with data-screenreader-only="true" so they are available to assistive technology without affecting visible layout.
• Close control: Set showClose={false} to hide the close button when you provide another explicit dismiss action inside the dialog body.

Import

import { Dialog, DialogContent } from '@im/integral/components/styled';

Props

Dialog

DialogContent

Related

The Image component uses this dialog pattern when expandable is set. See the Expandable Image section on that page.