# Delete Button

> A React delete button with inline confirmation: the bin opens a small confirm and cancel panel in place, no dialog needed.

- Type: React component (Buttons & Actions)
- Access: Free (the source is open to everyone)
- Version: 1.0.1
- Install: `npx wingo-ui@latest add delete-button`
- Docs: https://wingo-ui.com/components/delete-button

## Interaction

Click the bin to lift its lid open. A panel slides out with a check to confirm and a cross to back out. Escape, or the bin again, backs out too. Confirming draws a check where the bin was and swaps back to the bin after a moment; backing out settles the bin in place.

## Installation

```bash
npx wingo-ui@latest add delete-button
```

The CLI adds the files, their dependencies and a version record for updates.

With shadcn: `npx shadcn@latest add https://wingo-ui.com/r/delete-button.json`

Files:

- `components/ui/delete-button.tsx`

npm dependencies: `npm i motion`

Wingo UI dependencies (installed automatically):

- [UIProvider](https://wingo-ui.com/components/ui-config) ([Markdown](https://wingo-ui.com/components/ui-config.md))

## Usage

```tsx
"use client"

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

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

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `size?` | `"sm" \| "md" \| "lg"` | `"md"` | 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. |
| `radius?` | `"none" \| "sm" \| "md" \| "lg" \| "full"` | `"md"` | Corner radius of the tile and the confirm panel: square, 6px tighter, the original 14 / 16 / 18px per size, 6px rounder, or a pill. |
| `surface?` | `string` | `""` | Any CSS color for the tile and the two circles. Empty uses the soft gray (#F4F4F9 light, #262626 dark); hover lightens it. |
| `recess?` | `string` | `""` | Any CSS color for the confirm panel behind the circles. Empty uses #E7E7EF light, #1B1B1B dark. |
| `iconColor?` | `string` | `""` | Any CSS color for the bin, the cross and the focus ring. Empty uses #868593 light, #9B9AA7 dark. |
| `accent?` | `string` | `"#FF5F2E"` | Any CSS color for the confirm check and the check drawn after deleting. |
| `label?` | `string` | `"Delete"` | Accessible name of the bin button. Name the thing, e.g. "Delete invoice", when several sit on one screen. |
| `confirmLabel?` | `string` | `"Confirm delete"` | Accessible name of the check button in the panel. |
| `cancelLabel?` | `string` | `"Cancel"` | Accessible name of the cross button in the panel. |
| `deletedLabel?` | `string` | `"Deleted"` | Announced to screen readers after confirming. |
| `keptLabel?` | `string` | `"Kept"` | Announced to screen readers after backing out. |
| `resetDelay?` | `number` | `1400` | How long the check stays after confirming, in milliseconds, before the bin comes back. |
| `disabled?` | `boolean` | `false` | 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. |

## Examples

- **Remove team members**: One small button per row with a label that names the person; confirming removes the row after the check shows.
- **Sizes**: sm, md and lg. The panel and icons scale with the button.
- **Cart line item**: radius full and a deeper red accent, next to the product photo and price.

## See also

- [Button](https://wingo-ui.com/components/button) ([Markdown](https://wingo-ui.com/components/button.md))
- [Alert Dialog](https://wingo-ui.com/components/alert-dialog) ([Markdown](https://wingo-ui.com/components/alert-dialog.md))
- [Slide To Confirm](https://wingo-ui.com/components/slide-to-confirm) ([Markdown](https://wingo-ui.com/components/slide-to-confirm.md))
- [Toast](https://wingo-ui.com/components/toast) ([Markdown](https://wingo-ui.com/components/toast.md))
- [Haptic Button](https://wingo-ui.com/components/haptic-button) ([Markdown](https://wingo-ui.com/components/haptic-button.md))

---

Canonical: https://wingo-ui.com/components/delete-button
More components: https://wingo-ui.com/components · Index for agents: https://wingo-ui.com/llms.txt