Skip to content
Mox UI

Delete button

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

Installation

  1. 1

    Install the packages

    pnpm add motion clsx tailwind-merge
  2. 2

    Add the utility file

    lib/utils.ts
    import { clsx, type ClassValue } from "clsx";import { twMerge } from "tailwind-merge";
export function cn(...inputs: ClassValue[]) {  return twMerge(clsx(inputs));}
  3. 3

    Copy and paste the code into your project

    Loading source…
  4. 4

    Update the import paths to match your project

    Point @/lib/utils to your utility file if your path aliases differ.

Usage

app/page.tsx
"use client"
import { DeleteButton } from "@/components/ui/delete-button"
export function Demo() {  return <DeleteButton onConfirm={() => remove(id)} />}

Props

PropTypeDefaultDescription
onConfirm() => voidDefault: -Called when the check is pressed.
onCancel() => voidDefault: -Called when the panel closes without deleting, from the cross, the bin, or Escape.
classNamestringDefault: -Extra classes merged onto the root element.

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.

Credits and license

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.

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