Components

Delete button

A delete button that asks for confirmation in place, no dialog needed.

Dependencies

motion

Interaction Type

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

Props

Options you can pass to customize this component.

Prop
Type
Description
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.

Installation

npx shadcn@latest add swamimalode07/rare-ui/delete-button

How to use

"use client"


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


export function Demo() {
  return <DeleteButton onConfirm={() => remove(id)} />
}

Source Code

Click the code icon in the top-right corner to view the source code.

Keep in mind

Most components here are recreations of great work from around the web. I don't claim to be the original creator - this is my attempt to reverse-engineer, replicate, and often add a few extra features. I've tried to credit everyone; if I missed someone, let me know.

Contact

Found a bug or issue? Feel free to drop a DM.

License & Usage

  • •Free to use and modify in both personal and commercial projects.
  • •Attribution to Rare UI is appreciated when using a component.
  • •Please don't resell the components as your own kit.
Delete button