Dialog

Local specification source status: preview. Implementation preview pending sign-off.

A controlled alert dialog for explicit decisions, with slotted title and supporting-copy parts, a required primary action, an optional safe secondary action, and an optional transient error region.

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

Overview

A controlled confirmation surface for decisions that require an explicit action. A title slot, a body slot, and a primary action are required. Add a secondary safe action when the context needs one.

Composition

Copy is slotted, not passed as props. Dialog.Title and each Dialog.Description take plain strings, so a dialog can carry several paragraphs without the surface accepting arbitrary markup.

<Dialog isOpen={isOpen} testId='chat-disable-dialog' primaryAction={confirm} secondaryAction={cancel}>
    <Dialog.Title>Turn off the assistant?</Dialog.Title>
    <Dialog.Body>
        <Dialog.Description color='secondary'>We'll immediately delete every chat.</Dialog.Description>
        <Dialog.Description>Once deleted, this cannot be recovered.</Dialog.Description>
    </Dialog.Body>
</Dialog>

Hierarchy comes from color and order, not weight: color='secondary' drops the supporting paragraphs back so the one consequence the reader must not skim past keeps primary text and sits last, directly above the actions. There is no bold paragraph to reach for — a <strong> tag would inherit the user-agent 700 and a shared emphasis variant would be reachable from anywhere.

The actions stay props on purpose. Their order, focus, and tone are the alert grammar this component exists to enforce, so they are not open to composition. Dialog.Body owns the aria-describedby target, which keeps the accessible description to the copy and excludes the title.

Behavior

Dialog does not dismiss from the backdrop or Escape. The caller owns isOpen and closes it from an action callback. Focus moves to an enabled secondary action, or to the dialog itself when no safe action is available, and returns to the launcher after the close animation.

Pass error when the last action attempt failed. It renders in a role="alert" region below the copy and stays out of aria-describedby, so a retryable message is announced once rather than joining the dialog's standing description.

Usage by variant

Component specification