Confirm Dialog

Confirmation dialogs protect risky actions.

Use confirm for destructive actions, workflow actions, or actions that are hard to undo.

Boolean confirmation

export const deleteAction = {
  key: "delete",
  label: "Delete",
  icon: "lucide:trash-2",
  variant: "danger",
  handler: "users.delete",
  confirm: true
} as const;

When confirm: true, VibeFlui uses default confirmation messages.

Custom confirmation

export const suspendAction = {
  key: "suspend",
  label: "Suspend",
  icon: "lucide:ban",
  variant: "danger",
  handler: "users.suspend",
  confirm: {
    title: "Suspend user?",
    description: "The user will lose access until reactivated.",
    confirmLabel: "Suspend",
    cancelLabel: "Cancel",
    icon: "lucide:triangle-alert"
  }
} as const;

Second confirmation

Use secondConfirm for high-risk delete flows.

export const permanentDeleteAction = {
  key: "delete",
  label: "Delete",
  icon: "lucide:trash-2",
  variant: "danger",
  handler: "users.delete",
  confirm: {
    title: "Delete user?",
    description: "This action cannot be undone.",
    confirmLabel: "Continue",
    icon: "lucide:triangle-alert",
    secondConfirm: {
      title: "Delete user permanently?",
      description: "This is the final confirmation.",
      confirmLabel: "Delete permanently",
      cancelLabel: "Cancel",
      icon: "lucide:trash-2"
    }
  }
} as const;

secondConfirm: true also works and uses default second-confirmation messages.

{
  confirm: {
    title: "Delete user?",
    secondConfirm: true
  }
}

Danger tone

The confirm dialog uses danger tone when:

action.variant is danger.
action.key is delete.
the operation is delete.

Runtime behavior

Clicking an action with confirm opens the first dialog. If secondConfirm exists, confirming the first dialog opens the second. The action runs only after the final confirmation.