Components

Alert dialog

Blocking dialog for confirming destructive or important actions. Uses buttonVariants for Action (primary, per Yuno rule) and Cancel (outline). Different from Dialog — user MUST decide before dismissing.

Updated Jul 10, 2026 by Leonardo Posada

Variants

<AlertDialog>
  <AlertDialogTrigger asChild>
    <Button>Delete rule</Button>
  </AlertDialogTrigger>
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogTitle>Delete rule?</AlertDialogTitle>
      <AlertDialogDescription>This will stop the rule from evaluating.</AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogCancel>Cancel</AlertDialogCancel>
      <AlertDialogAction>Delete rule</AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>

When to use

  • Destructive actions (delete rule, delete list, revoke API key).
  • Actions that can't be undone.

When not to use

  • Non-critical prompts — use Dialog.
  • Transient feedback — use Toast.

Usage

Do
  • Copy the destructive verb into the action button ('Delete rule', not 'Yes').
  • Explain what will happen in one sentence.
Don't
  • Don't use variant='destructive' — Yuno reserves red for real alerts. Confirm via Dialog copy.
  • Don't stack dialogs.