Actions

resetAfterms, 0 keeps the tick1400

Async confirm

Disabled

Delete Button

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

Install it in one line

Available in v1.0.0

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 or 19 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.

Some of these designs take cues from interfaces we've admired around the web. If one started as your idea and you'd like credit, message us on X @devignerui or in the Discord and we'll add it.

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>} />

Delete through an API with error handling

Return the request's promise so the tile waits on it, and handle failures yourself.

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

export function DeleteInvoice({ id }: { id: string }) {
  return (
    <DeleteButton
      label="Delete invoice"
      onConfirm={() => fetch(`/api/invoices/${id}`, { method: "DELETE" }).then((r) => {
        if (!r.ok) throw new Error("Delete failed");
      })}
      onError={(error) => console.error(error)}
    />
  );
}

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.

onCancel-

function

Fires on Keep, Escape or a second press.

onError-

function

Handles a rejected onConfirm.

labelDelete

string

Tile accessible name.

confirmLabelConfirm delete

string

Confirm button name.

cancelLabelKeep

string

Cancel button name.

pendingLabelDeleting

string

Announced while pending.

doneLabelDeleted

string

Announced when done.

resetAfter1400

number

ms before the tick resets. 0 keeps it.

leftfalse

boolean

Puts the confirmation on the left.

disabledfalse

boolean

Disables interaction.

How to use it

The live demo is a trash tile. Press it and the lid swings open while Confirm and Keep buttons slide out. Confirm starts a short fake request, so you see the spinner and then a tick before it resets.

When to use it

Deleting a single row, file or card inline, where a full confirmation dialog would be too heavy.
Deletes that call an API: return the promise from onConfirm and the tile shows pending, then done, or goes back to idle if it fails.

When to reach for something else

Bulk or irreversible deletes that need the user to read consequences or type a name. Use a dialog for those.

Keyboard

Enter / Space: On the trash tile, opens the confirmation. Pressed again while open, it cancels.
Tab: Moves between the tile, Confirm and Keep.
Escape: Cancels while the confirmation is open and returns focus to the tile.

Accessibility

A real button element with visible focus.
Its accessible name follows the state (label, pendingLabel, copiedLabel, errorLabel), and a polite live region announces every state but idle.
aria-busy is set while an async value resolves, and data-status mirrors the state for styling.
With iconOnly the text is hidden but label stays the accessible name.
Honors prefers-reduced-motion and an ancestor <MotionConfig reducedMotion="always">, so an in-app motion switch works too.

Theming

classNames targets the root, the tile and the confirmation pill.
Uses bg-background for the shell and bg-secondary for the confirmation. The shell's shadow-elevated utility is a Devigner shadow token: define --shadow-elevated in your @theme or swap in shadow-lg.
label, confirmLabel, cancelLabel, pendingLabel and doneLabel set every accessible name, for translation or more specific wording ("Delete invoice").
left puts the confirmation on the left of the tile, and the lid opens toward it.

Edge cases

If onConfirm returns nothing, the tile goes straight to done. If it returns a promise, the spinner only appears after a short grace period, so fast requests do not flash it.
A rejected promise returns the tile to idle and calls onError. Without onError the error is re-thrown, so pass onError to show your own message.
resetAfter (1400 ms by default) is how long the tick stays. Set 0 to keep the done state, for example when the row is about to unmount.
Setting disabled while the confirmation is open closes it.

Troubleshooting

The spinner never shows.

onConfirm must return the promise. An async function works; a function that starts a fetch without returning it goes straight to done.

I get an uncaught error when the request fails.

Pass onError. Without it, a rejected onConfirm is re-thrown after the tile resets.

The component renders with no background or the wrong colors.

Colors use the standard shadcn/ui tokens only (background, foreground, primary, secondary, muted, accent, border, input, ring, destructive), so a project set up with shadcn/ui needs nothing extra and the component follows its theme, dark mode included. Without shadcn/ui, define those CSS variables for :root and .dark and map them in your Tailwind v4 @theme, or run npx shadcn init.

Stuck on something else? Ask in the Discord.