Swipe to Delete

A swipeable list item that reveals an iOS-style delete action on drag.

@spectrumui/swipe-to-delete

ACAva Chen9:41 AMDesign review notes — the new empty states look great

MRMarcus Reid8:17 AMRe: Q3 roadmap — can we move the sync to Thursday?

PNPriya NairYesterdayYour invoice for June is ready to download

Drag a row left to delete — or hover for the button

Installation

Usage

import { SwipeToDelete } from "@/components/spectrumui/swipe-to-delete"

<SwipeToDelete label="email from Ava" onDelete={() => removeEmail(id)}>
  <EmailRow />
</SwipeToDelete>

API Reference

SwipeToDelete

Wraps its children as the draggable row of a role="group" wrapper named by label. Pressing Delete or Backspace while the wrapper is focused deletes the row, and onDelete fires only after the collapse animation finishes — remove the item from state there.

Prop	Type	Default	Description
*`onDelete`	`() => void`	-	Fires once the collapse animation finishes; remove the item here
*`children`	`ReactNode`	-	Row content rendered on the draggable surface
`label`	`string`	`"item"`	Accessible name of the row; also used for the delete button label
`actionWidth`	`number`	`96`	Width in pixels of the revealed delete zone
`threshold`	`number`	`0.6`	Fraction of actionWidth the drag must pass to commit the delete
`showButtonOnHover`	`boolean`	`true`	Show a fallback delete button on row hover/focus for non-touch users
`disabled`	`boolean`	`false`	Disables dragging, the delete button and keyboard deletion
`className`	`string`	-	Additional classes merged with the default wrapper styles

Examples

Custom action width and threshold

Ship onboarding flowToday

Review pull requestsToday

Update changelogTomorrow

A wider action zone (120px) that commits at 40% of the swipe