GretTech
Back to Components

Confirm Dialog

popularity exchange marketplace

A destructive action confirmation dialog.

Props

PropTypeDefaultDescription
title
string"Are you absolutely sure?"The dialog title
description
string"This action cannot be undone..."The dialog description
triggerText
string"Open Dialog"Text for the default trigger button
confirmText
string"Continue"Text for the confirm button
cancelText
string"Cancel"Text for the cancel button
variant
'default' | 'destructive''default'Variant for the confirm button
onConfirm
() => void-Callback fired when user confirms
children
ReactNode-Custom trigger element

Usage Examples

Default Variant

import { ConfirmDialog } from "@/showcase/confirm-dialog";
export default function DefaultVariantExample() {
  return (
    <ConfirmDialog
      title="Publish Post"
      description="Are you ready to publish this post to the public?"
      confirmText="Publish"
      cancelText="Wait, not yet"
      variant="default"
      onConfirm={() => console.log("Published")}
    >
      <button className="px-4 py-2 bg-primary text-primary-foreground rounded-md font-medium">
        Publish Post
      </button>
    </ConfirmDialog>
  );
}

Key Features

  • Focus trapping
  • Destructive styling variants
  • Easy async callback handling
  • Fully accessible ARIA labels