## Swipe Actions (S—074)

List rows you drag sideways to reveal Archive and Delete; a long swipe commits, a short one snaps back.

- URL: https://sundaeui.dev/components/swipe-actions
- Category: UI components · Art direction: Refined
- Access: Sundae Pro (authenticated install)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/swipe-actions.json`
- Tags: swipe, gesture, archive, delete, list, drag, mail

Drag a row left and the actions slide out from under it. Past the halfway point the leading action grows to take the whole row, and letting go commits it; anything shorter snaps open or closed.
The row collapses away when an action fires, and the actions are also real buttons reachable by keyboard, so nothing depends on dragging.

### Usage

```tsx
import { SwipeActions } from '@/components/sundae/swipe-actions'

<SwipeActions />
```

### Props

- `items` (`{ id: string; title: string; meta?: string }[]`, required): Rows.
- `onAction` (`(id: string, action: 'archive' | 'delete') => void`): Called when an action fires.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Inbox-style lists on touch screens.
- Lists where a frequent action should be one gesture away.

### When not to use

- Desktop-only tables: use row menus.
- Actions that cannot be undone without a confirm.

### Accessibility

- Each row exposes its actions as buttons after the row content; keyboard users never need to swipe.
- Removing a row is announced through a polite live region.
- Reduced motion removes the movement and keeps every state change.