Swipe action
Reveals row actions on a left swipe. Every gesture needs a non-gesture equivalent, so the actions also live in an always-visible overflow menu — the keyboard- and screen-reader-operable path. The swipe itself is a pointer-only shortcut.
<SwipeAction menuLabel="Actions for Northwind" actions={[ { key: 'archive', label: 'Archive', icon: <Archive />, onAction: archive }, { key: 'delete', label: 'Delete', tone: 'danger', icon: <Trash2 />, onAction: remove }, ]}> <ListItem primary="Northwind migration" secondary="Platform · due Fri" /></SwipeAction>Live
Swipe a row left to reveal Archive and Delete, or tap the ⋯ menu for the same actions. Either way an undo snackbar appears.
Accessibility
The overflow menu is the single accessible path: it is a real, focusable Menu carrying the same actions, with destructive ones in the danger tone. The swipe-revealed buttons are aria-hidden and non-focusable, so they never double-announce or land in the tab order.
Props
| Prop | Type | Default | Notes |
|---|---|---|---|
actions | SwipeActionItem[] | — | { key, label, icon?, onAction, tone? }. |
actions[].tone | 'default' | 'danger' | 'default' | Danger reads red in both the swipe and the menu. |
menuLabel | string | 'Actions' | Accessible label for the overflow menu. |
children | ReactNode | — | The row content, usually a ListItem. |