Confirm Button
Freev1.0.0Press and hold to delete, with a meter while you hold and five seconds to undo.
Build for your project
Code/install build
Usage
Import it and pass your content. The props that matter most are listed next.
Example
"use client";
import { ConfirmButton } from "@/components/ui/notchset/confirm-button";
/** Soft delete with an undo window; delete for good when it expires. */
export function DeleteAgent({ agentId, markDeleted, restore, deleteForever }: { agentId: string; markDeleted: (id: string) => void; restore: (id: string) => void; deleteForever: (id: string) => void }) {
return (
<ConfirmButton
target="PLANNER-V13"
labels={{ hold: "DELETE AGENT" }}
onConfirm={() => markDeleted(agentId)}
onUndo={() => restore(agentId)}
onExpire={() => deleteForever(agentId)}
/>
);
}Props
holdMs–numberHow long to hold (ms). Default 1200.
undoMs–numberHow long Undo stays (ms). Default 5000; 0 for none.
target–stringWhat is deleted, for the help line and its announcement.
onConfirm–() => voidCalled when the hold completes.
onUndo–() => voidCalled when Undo is pressed.
onExpire–() => voidThe undo window ran out: the deletion is final.
Show all 7 propsShow fewer
labels–Partial<ConfirmButtonLabels>Every word, for other languages.
Anatomy
- The Notchset instrument parts: plate, check and glyph flip.
- A native button with pointer capture; one file serves both builds.
- Plays signal, confirm and tick through beautiful-ui-sound.
ConfirmButtondata-slot="confirm-button"The legend and meter, the key on its plate, and the help or Undo row.
Keydata-slot="confirm-button-key"The button you hold.
Undodata-slot="confirm-button-undo"The Undo key and its draining nodes.
Source
components/ui/notchset/confirm-button.tsx
Loading the code
Build for your project
Code/install build
Installation
Base UI
pnpm dlx shadcn@latest add https://notchset.dev/r/confirm-button.jsonRadix
pnpm dlx shadcn@latest add https://notchset.dev/r/radix-nova/confirm-button.jsonFree, no account or key. Use the command for your project's primitives: a radix-*, new-york or default style in components.json is Radix, a base-* style is Base UI. With the @notchset registry added, @notchset/<name> picks for you.
Install by hand
- 1. No extra packages: React and Tailwind CSS v4 are enough.
- 2. Copy the files to these paths (the source, or save them all as a .zip)
- components/ui/notchset/confirm-button.tsx
- lib/beautiful-ui/notchset/instrument.tsx
- lib/beautiful-ui/notchset/root.ts
- 3. No stylesheet needed.
- 4. Install what it builds on first: shadcn's cn helper (lib/utils.ts, from npx shadcn init), the theme foundation (its tokens and base styles)
Styles didn't apply?
The CLI adds the styles to the CSS file named in components.json (tailwind.css). Check that it points at your global stylesheet, that the project uses Tailwind CSS v4, and that the file is imported in your root layout. Installed by hand: paste styles.css into that file.
For coding agents
Give your coding assistant the Markdown guide instead of screenshots.
Use it for
- Deleting something that matters, without a confirmation dialog
- Destructive actions that should still be undoable for a moment
Use something else when
- Everyday actions: holding is slow on purpose
- Actions you can't undo and must explain: use an Alert Dialog
Mistakes to avoid
- Do the real deletion in onExpire (or keep it reversible until then)
- If the button can unmount during the undo window (a closing dialog, a removed row), finalise in the parent: onExpire doesn't run after unmount
- Keep it for destructive actions; it is signal on purpose
Agents find it by
- hold to delete, hold to confirm, destructive action, delete agent, confirm delete, undo, Notchset
Where agents read it
- Guide for this component: https://notchset.dev/md/confirm-button.md
- Every component, for tools without MCP: /llms.txt
- MCP server:
https://notchset.dev/api/mcp(setup)
Behaviour
Keyboard
- Space / Enter (hold)
- Hold to delete
- Esc
- Cancel the hold
- Tab
- Reach Undo after confirming
Accessibility
- The accessible name says what is deleted and how long to hold
- Space or Enter held down holds it; Esc or releasing cancels
- The result and the restore are announced politely
- Never fires before the full hold; any release cancels
Motion
- Hold
- The key sinks 2px onto its plate (40ms); the tint sweeps linearly over the hold; the lid lifts and tilts to −18°; the meter lights one node per tenth with a bloom
- Release early
- The tint returns over 260ms; nothing happens
- Confirm
- The meter flashes three times; the label flips to DELETED; Undo's five nodes drain one per second
Responsive
- Fixed 40px key; the target label truncates rather than wrap.
- 44px on touch screens.
Performance
- The hold runs one requestAnimationFrame loop only while held or draining, writing one CSS variable a frame.
- Idle keys do no JavaScript work.
Changelog
v1.0.0 · 2026-10-02
First release
