A slide-to-delete track where the thumb eats the label as it travels and the bin at the end opens its lid. Release past the threshold and the thumb drops into the bin while a red pill wipes in.
iPhone 15 Pro
Lisbon · last active 2 min ago
npx shadcn@latest add https://hyperblur.dev/r/button-slide-delete.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/button-slide-delete.tsx.
import { ButtonSlideDelete } from "@/components/hyperblur/button-slide-delete"
<ButtonSlideDelete label="Slide to remove device" onConfirm={removeDevice} />| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | "Slide to delete" | Text inside the track, also the accessible name of the thumb. |
| doneLabel | string | "Deleted" | Text shown once the slide completes. |
| threshold | number | 0.88 | Fraction of the track the thumb must pass before release confirms. |
| onConfirm | () => void | undefined | Called when the slide completes. |
| onProgress | (value: number) => void | undefined | Called with a value from 0 to 1 while the thumb moves. |
| accent | string | "#ef4444" | Danger color used for fills, glows and the focus ring. |
| resetAfter | number | 2600 | Milliseconds before the finished state returns to the start. Use 0 to keep the finished state. |
| disabled | boolean | false | Blocks every interaction and dims the control. |