Component

Dialog

Open a modal surface with focus containment, Escape and outside dismissal, labelled content, and automatic focus restoration.

Usage

Import the component entry and start with its smallest complete example.

Import

import { Dialog } from "@chitrank2050/monoline-ui/dialog"

Basic usage

<Dialog>
  <Dialog.Trigger asChild>
    <Button>Edit profile</Button>
  </Dialog.Trigger>
  <Dialog.Content>
	<p className="ml-eyebrow">Profile · Public details</p>
    <Dialog.Title>Edit profile</Dialog.Title>
    <Dialog.Description>Update the details shown on your profile.</Dialog.Description>
    <Dialog.Close asChild>
      <Button variant="secondary">Done</Button>
    </Dialog.Close>
  </Dialog.Content>
</Dialog>

Usage guidance

Choose the component for its interaction model and semantics before customizing its appearance.

Use when

Dialog is appropriate when a focused task must temporarily interrupt the page and keep interaction inside a modal surface.

Avoid when

The content can remain in the normal page flow or only needs lightweight context beside a trigger.

Accessibility

Dialog traps focus, makes background content inert, closes on Escape, and restores focus. Every dialog still needs a Dialog.Title and useful description when context is not obvious.

Client Component

This component needs browser JavaScript for state or browser APIs.

API reference

Props, slots, and callbacks available on this component.

openbooleanControlled open state

defaultOpenbooleanInitial uncontrolled state

onOpenChange(open) => voidRuns whenever open state changes

Dialog.Triggercompound slotControl that opens the dialog

Dialog.Contentcompound slotPortal-mounted modal surface

Dialog.Titlecompound slotRequired accessible dialog name

Dialog.Descriptioncompound slotOptional supporting description

Dialog.Closecompound slotControl that closes the dialog

Design tokens

Theme variables this component reads for color, spacing, and motion.

--popoverCSS varDialog surface

--backgroundCSS varModal backdrop blend

--shadow-xlCSS varFloating elevation

--z-modalCSS varOverlay order

Implementation

The source used by the example above, including any state it needs.

<Dialog>
  <Dialog.Trigger asChild>
    <Button>Edit profile</Button>
  </Dialog.Trigger>
  <Dialog.Content>
	<p className="ml-eyebrow">Profile · Public details</p>
    <Dialog.Title>Edit profile</Dialog.Title>
    <Dialog.Description>Update the details shown on your profile.</Dialog.Description>
    <Dialog.Close asChild>
      <Button variant="secondary">Done</Button>
    </Dialog.Close>
  </Dialog.Content>
</Dialog>

Compare related components or review the package and theme setup.

01ComponentPopoverComponent · ReferenceReference→02ComponentCommand SearchComponent · ReferenceReference→03SetupInstall Monoline UISetup · GuideGuide→04ThemeTailwind CSS v4 design tokensTheme · FoundationsFoundations→

Interactive preview