NewPrimitives · added Sep 21

Delete Button

Asks before it deletes, waits for your API call, then shows a tick.

Install it in one line

npx devignerui add delete-button

Writes components/ui/delete-button.tsx and lists what it needs.

First time here

npx devignerui init

Or by hand

Needs React 18+ and Tailwind CSS v4.
Install the dependencies.
npm i cn motion @devigner-ui/icons devignerui
Paste the source from into components/ui/delete-button.tsx.

Usage

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

export function Example() {
  return (
    <DeleteButton
      resetAfter={1400}
      onConfirm={() => fetch("/api/rows/7", { method: "DELETE" })}
    />
  );
}

Custom composition

<DeleteButton onConfirm={remove} renderConfirmation={({ status }) => <span>{status}</span>} />

Every prop

onConfirm-

function

Confirmation handler.

status-

DeleteButtonStatus

Controlled status.

defaultStatusidle

DeleteButtonStatus

Initial status.

onStatusChange-

function

Status callback.

renderConfirmation-

function

Confirmation slot.

classNames-

DeleteButtonClassNames

Slot classes.

slotProps-

DeleteButtonSlotProps

Slot attributes.

disabledfalse

boolean

Disables interaction.