Components

Dialog

Modal overlay that requires the user's attention or confirmation. Uses the Yuno dimmer (bg-foreground/24, no blur).

Updated Jul 8, 2026 by Leonardo Posada

Confirmation

<Dialog>
  <DialogTrigger asChild>
    <Button variant="outline">Open dialog</Button>
  </DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Delete API key?</DialogTitle>
      <DialogDescription>
        This action cannot be undone. Any integrations using
        this key will stop working.
      </DialogDescription>
    </DialogHeader>
    <DialogFooter>
      <DialogClose asChild>
        <Button variant="outline">Cancel</Button>
      </DialogClose>
      <Button variant="destructive">Delete key</Button>
    </DialogFooter>
  </DialogContent>
</Dialog>

When to use

  • Confirmations for destructive actions (Delete X?).
  • Short focused forms (create API key, invite user).
  • Blocking notifications the user must acknowledge.

When not to use

  • Long forms — use a Sheet or full page.
  • Non-blocking feedback — use Toast.
  • Contextual info triggered by hover — use Tooltip or Popover.

Usage

Do
  • Title states the action clearly ('Delete API key?').
  • Provide Cancel + primary action — never only the destructive option.
  • Focus the safe default (Cancel) on open when destructive.
Don't
  • Don't stack Dialogs on top of Dialogs.
  • Don't put critical error messaging inside a Dialog that auto-dismisses.
  • Don't apply blur on the overlay — Yuno uses flat dim.