← All components Feedback & overlays

Dialog

Modal window with focus trap, ESC dismiss, focus restoration. Compound API + Apple-HIG button conventions.

Inspired by Radix Dialog (Pedro Duarte), WAI-ARIA APG Dialog Modal, Apple HIG Alerts.

Preview

What it looks like.

Click Delete conversation to open. ESC or click outside to dismiss.

Live — the real component, scoped to this frame.

Usage

Drop it into your app.

import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from '@locara/components'

<Dialog open={open} onOpenChange={setOpen} variant="alertdialog">
  <DialogContent size="md" dismissOnBackdropClick={false}>
    <DialogHeader>
      <DialogTitle>Delete conversation?</DialogTitle>
      <DialogDescription>
        This conversation and its transcripts will be permanently removed.
      </DialogDescription>
    </DialogHeader>
    <DialogFooter>
      <Button variant="ghost" onClick={() => setOpen(false)}>Cancel</Button>
      <Button variant="danger" onClick={confirmDelete}>Delete</Button>
    </DialogFooter>
  </DialogContent>
</Dialog>

Or copy the source into your repo: locara add dialog

Design notes

Why it works this way.

Use `variant="alertdialog"` for destructive confirmations — disables backdrop-click dismissal (per WAI-ARIA APG). Apple HIG: Cancel on the left, destructive (in red) on the right; safe action is default. Focus is trapped while open and restored to the trigger on close.