Delete Button React component for Tailwind CSS v4

Add to a project

Requirements: React 19 and Tailwind CSS v4, in Next.js (App Router or Pages), Vite or React Router. Installation guide · Next.js setup · Vite setup

Usage

Import DeleteButton from @/components/ui/delete-button.

"use client"

import { DeleteButton } from "@/components/ui/delete-button"

export function Demo({ onDelete }: { onDelete: () => void }) {
  return <DeleteButton label="Delete invoice" onConfirm={onDelete} />
}

Props

• sizedefault "md"
  "sm" | "md" | "lg"

  Scale of the tile, the confirm panel and the icons. The tile is 40px (sm), 48px (md) or 56px (lg) square; on touch screens the sm tile and the confirm and cancel circles get a 44px tall hit area.

• radiusdefault "md"
  "none" | "sm" | "md" | "lg" | "full"

  Corner radius of the tile and the confirm panel: square, 6px tighter, the original 14 / 16 / 18px per size, 6px rounder, or a pill.

• surfacedefault ""
  string

  Any CSS color for the tile and the two circles. Empty uses the soft gray (#F4F4F9 light, #262626 dark); hover lightens it.

• recessdefault ""
  string

  Any CSS color for the confirm panel behind the circles. Empty uses #E7E7EF light, #1B1B1B dark.

• iconColordefault ""
  string

  Any CSS color for the bin, the cross and the focus ring. Empty uses #868593 light, #9B9AA7 dark.

• accentdefault "#FF5F2E"
  string

  Any CSS color for the confirm check and the check drawn after deleting.

• labeldefault "Delete"
  string

  Accessible name of the bin button. Name the thing, e.g. "Delete invoice", when several sit on one screen.

• confirmLabeldefault "Confirm delete"
  string

  Accessible name of the check button in the panel.

• cancelLabeldefault "Cancel"
  string

  Accessible name of the cross button in the panel.

• deletedLabeldefault "Deleted"
  string

  Announced to screen readers after confirming.

• keptLabeldefault "Kept"
  string

  Announced to screen readers after backing out.

• resetDelaydefault 1400
  number

  How long the check stays after confirming, in milliseconds, before the bin comes back.

• disableddefault false
  boolean

  Blocks the button and dims it. Disabling it while the panel is open backs out of the panel.

• onConfirm
  () => void

  Called when the check is pressed.

• onCancel
  () => void

  Called when the panel closes without deleting, from the cross, the bin, or Escape.

• className
  string

  Extra classes merged onto the root element; other div props are spread onto it too. The root carries data-state (open or closed) and data-status (idle, deleted or kept) for styling.

FAQ

More React button components