opinion

SwipeActions

Swipe a row to reveal quick actions.

Task rowsSwipe left, or use the kebab button

Harbour homepage

Maya · Fri 24 Oct

Icon audit

Maya · Mon

Draft launch checklist

Priya · Fri

Rota export

Leo · Done

Nothing chosen yet.

Idle

Harbour homepage

Maya · Fri 24 Oct

Disabled

Rota export

Leo · Done

One action

Draft launch checklist

Priya · Fri

Three actions

Icon audit

Maya · Mon

In context

TasksThe same rows on the phone, with a tip under the list

Tasks

Harbour homepage

Maya · Fri 24 Oct

Icon audit

Maya · Mon

Draft launch checklist

Priya · Fri

Rota export

Leo · Done

Tasks

Harbour homepage

Maya · Fri 24 Oct

Icon audit

Maya · Mon

Draft launch checklist

Priya · Fri

Tip

Swipe left to assign or delete, or tap the dots.

Props

Prop	Type	Required	Default
`children`	`ReactNode`	Yes	—
`actions`	`SwipeAction[]`	Yes	—
`disabled`	`boolean \| undefined`	No	—
`open`	`"left" \| "right" \| null \| undefined`	No	—
`defaultOpen`	`"left" \| "right" \| null \| undefined`	No	null
`onOpenChange`	`((open: "left" \| "right" \| null) => void) \| undefined`	No	—

Accessibility

Every revealed action is a real, keyboard-focusable button, and a small, always-visible kebab button on the row's trailing edge opens and closes the same state a swipe does, so a mouse or keyboard user has the same access. Past about 40% of the actions' width, release snaps open; otherwise the row springs back (a plain CSS transition).

data-rebar-* attributes

data-rebar-component="swipe-actions"; parts: content, actions, action (destructive ones carry data-rebar-destructive), toggle.

Migrating to Ant Design

AntD has no direct equivalent. antd-mobile's SwipeAction is the closer sibling library if the migration target is genuinely mobile.