SwipeItem
List row whose leading/trailing actions are revealed by a horizontal swipe, with keyboard parity
Category: display · WCAG 2.2-AA · display, swipe, list, mobile, gesture, actions
States
- closed
- leading
- trailing
Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode | — | The row content |
leadingActions | SwipeAction[] | [] | Actions revealed by dragging toward the end edge (shown on the start edge) |
trailingActions | SwipeAction[] | [] | Actions revealed by dragging toward the start edge (shown on the end edge) |
className | string | — | Additional CSS class names merged onto the root element. |
Design tokens
--cascivo-color-surface--cascivo-color-accent--cascivo-color-accent-content--cascivo-color-destructive--cascivo-color-text-on-destructive--cascivo-target-min-coarse--cascivo-motion-enter
When to use
- List rows on touch surfaces where secondary actions (archive, delete) should hide until swiped
- Mail/inbox-style rows that reveal contextual actions behind the content
- Compact lists where always-visible action buttons would crowd each row
When not to use
- A single primary action per row — render it inline as a Button
- Destructive actions that need confirmation — pair with an AlertDialog instead of swipe-only
- Non-list, free-form content — swipe-to-reveal is a list-row affordance
How to build an accessible SwipeItem in React →
Examples
Trailing actions
<SwipeItem
trailingActions={[
{ label: 'Archive', onSelect: archive },
{ label: 'Delete', onSelect: remove, destructive: true },
]}
>
<MessageRow message={message} />
</SwipeItem>Leading and trailing
<SwipeItem
leadingActions={[{ label: 'Pin', icon: <PinIcon />, onSelect: pin }]}
trailingActions={[{ label: 'Delete', onSelect: remove, destructive: true }]}
>
<TaskRow task={task} />
</SwipeItem>Related components
- ActionSheet — Use an ActionSheet when a row tap should present a fuller list of actions
- List — SwipeItem wraps individual rows within a list