SwipeableListItem

SwipeableListItem

<SwipeableListItem
  leadingActions={[{ id: 'archive', label: 'Archive', tone: 'success', icon: <ArchiveIcon />, onAction: () => archive(id) }]}
  trailingActions={[{ id: 'delete', label: 'Delete', tone: 'danger', icon: <TrashIcon />, onAction: () => trash(id) }]}
>
  <List.Item
    media={<Avatar fallback="AL" />}
    primary="Alice Liddell"
    secondary="Just deployed v0.5.0"
    trailing={<Text size="sm" tone="muted">2m</Text>}
  />
</SwipeableListItem>

Install: @helixui/core

import { SwipeableListItem, type SwipeAction } from '@helixui/core'

status: beta · since: 0.5.0

Tags: mobile, gesture, swipe, row-actions

Anatomy

← (Archive) ─── [ row content ] ─── (Delete) →

Layout

• display — block
• width — fill
• height — content
• intrinsicSize — fills width; row hugs content height
• stackable — true
• fullBleed — false

Visual

A list row with hidden leading/trailing actions revealed by horizontal swipe. Snaps open or closed; release past threshold triggers the action.

Props

Name	Type	Default	Description
leadingActions	SwipeAction[]	[]	Actions revealed by left-to-right swipe.
trailingActions	SwipeAction[]	[]	Actions revealed by right-to-left swipe.
commitThreshold	number	120	Pixel distance past which release commits the first action on that side.
actionWidth	number	80	Width (px) of one action button.

Slots

• children — the list row content

Tokens used

color.bg.surface.default, color.bg.action.neutral.default, color.bg.action.brand.default, color.bg.action.danger.default, color.bg.action.success.default, color.bg.action.warning.default, color.text.primary, color.text.on.brand, color.text.on.danger, color.text.on.success, color.text.on.warning, font.family.sans, font.size.xs, font.weight.medium

Accessibility

Notes

• Pointer-event-driven (works with mouse and touch). On keyboard-only flows, the swipe affordance is hidden — pair with a Menu / context affordance for keyboard parity.
• Snaps open to the first action when released past actionWidth/2; commits the first action when released past commitThreshold.
• For destructive actions, set tone="danger" AND require explicit confirmation (an extra prompt) — accidental swipes happen.

Composes with

Component	Relation	Note
List	parent	Used as List items on mobile.
ActionSheet	sibling
Menu	sibling

Prompt examples

These are the AI prompt → JSX mappings used by the helixui prompt DSL and integrations like Cursor / Claude Code.

swipe to archive or delete

“left action archive, right action delete”

<SwipeableListItem
  trailingActions={[{ id: 'del', label: 'Delete', tone: 'danger', onPress: del }]}
  leadingActions={[{ id: 'arc', label: 'Archive', onPress: archive }]}
>
  Row content
</SwipeableListItem>

Related

• List
• ActionSheet
• Menu