Delete Button

A confirmation-enabled delete button component with customizable dialog content. Safely handles destructive actions with user confirmation.

A versatile delete button component that provides a safe, user-friendly way to handle destructive actions. It combines a prominent delete trigger button with a confirmation dialog, allowing full customization of the confirmation message, button labels, and visual presentation.

Installation

npx shadcn@latest add @grenish/delete-button

This requires the @grenish registry in your components.json. See the installation guide for setup.

Manual Dependencies

If you prefer manual installation, add the base components:

npx shadcn@latest add alert-dialog button

Usage

import DeleteButton from "@/components/tools/delete-button"

<DeleteButton />

import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/components/ui/alert-dialog";
import { Button } from "@/components/ui/button";
import { TrashIcon } from "@phosphor-icons/react/dist/ssr";

type DeleteButtonProps = {
  iconOnly?: boolean;
  size?: React.ComponentProps<typeof Button>["size"];
  title?: React.ReactNode;
  description?: React.ReactNode;
  deleteText?: React.ReactNode;
  cancelText?: React.ReactNode;
};

export default function DeleteButton({
  iconOnly = false,
  size,
  title = "Are you sure?",
  description = "This action permanently deletes the link and its associated data. If you may need it later, consider disabling the link instead.",
  deleteText = "Delete",
  cancelText = "Cancel",
}: DeleteButtonProps) {
  return (
    <AlertDialog>
      <AlertDialogTrigger asChild>
        <Button
          variant={"destructive"}
          size={size ?? (iconOnly ? "icon" : "default")}
          aria-label="Delete"
        >
          <TrashIcon />
          {!iconOnly ? "Delete" : null}
        </Button>
      </AlertDialogTrigger>
      <AlertDialogContent size="sm">
        <AlertDialogHeader>
          <AlertDialogTitle>{title}</AlertDialogTitle>
          <AlertDialogDescription>{description}</AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter>
          <AlertDialogCancel>{cancelText}</AlertDialogCancel>
          <AlertDialogAction variant={"destructive"}>
            {deleteText}
          </AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  );
}

Props

Prop

Type

Features

Customizable Dialogs: Full control over confirmation dialog titles, descriptions, and button labels
Flexible Display Modes: Choose between icon-only or icon-with-text presentations
Multiple Size Variants: Supports all standard button sizes for different UI contexts
Built-in Safety: Requires explicit user confirmation before any action
Semantic HTML: Implements proper alert dialog patterns for accessibility
Type-Safe Props: Fully typed props for seamless TypeScript integration

Examples

Default Configuration

<DeleteButton />

Icon Only

<DeleteButton iconOnly={true} />

Custom Title and Description

<DeleteButton 
  title="Delete Account?"
  description="This will permanently delete your account and all associated data. This action cannot be undone."
/>

Delete Button

On this page