Fluxo UIFluxo UIv0.4.93

Swipeable List Item

A list row that reveals actions when the user swipes it left or right — the classic iOS Mail interaction.

Basic Usage

Swipe to reveal actions

Drag a row left to reveal Archive + Delete, drag right to reveal Star. Tap a revealed action to trigger it.

Build status
main is green — all checks passed.
Welcome aboard
Onboarding kit attached.
Standup notes
Three items for tomorrow.
New comment
@alex replied to your card.
Last action: —
import { SwipeableListItem } from 'fluxo-ui';

<SwipeableListItem
    rightActions={[
        { label: 'Archive', icon: <ArchivedIcon />, color: 'warning', onTrigger: archive },
        { label: 'Delete', icon: <TrashIcon />, color: 'danger', onTrigger: remove },
    ]}
    leftActions={[
        { label: 'Star', icon: <StarIcon />, color: 'primary', onTrigger: star },
    ]}
>
    <div>Subject line — preview text…</div>
</SwipeableListItem>

Variants

Inline variant (default)

Flush list rows — best for traditional list views.

Inline row — swipe left to reveal delete
Another inline row

Card variant

Each row is a rounded card with a subtle border — works well for tile-like list patterns.

Card-style row — swipe in either direction
Another card row

Compact variant

Tighter padding and smaller text for dense lists.

Compact row
Another compact row
<SwipeableListItem variant="card" rightActions={...}>
    {/* row body */}
</SwipeableListItem>

Full-swipe trigger

Full-swipe to trigger

Set fullSwipe on an action and swipe past 70% — the action fires automatically without a tap.

Item #1 — full-swipe left to delete
Item #2 — full-swipe left to delete
Item #3 — full-swipe left to delete
Item #4 — full-swipe left to delete
Item #5 — full-swipe left to delete
<SwipeableListItem
    rightActions={[
        { label: 'Delete', icon: <TrashIcon />, color: 'danger', fullSwipe: true, onTrigger: remove },
    ]}
    fullSwipeThreshold={0.7}
>
    {/* row content */}
</SwipeableListItem>

Import

import { SwipeableListItem } from 'fluxo-ui';
import type { SwipeableListItemProps, SwipeableAction, SwipeableVariant } from 'fluxo-ui';

Props

childrenreq
ReactNode

Main row content that is revealed/translated when the user swipes.

leftActions
SwipeableAction[]

Actions revealed when swiping right. Each: { key?, label, icon?, color?, onTrigger?, fullSwipe?, background?, ariaLabel? }.

rightActions
SwipeableAction[]

Actions revealed when swiping left.

threshold
number"0.4"

Fraction of the actions strip width that must be swiped to open. Range 0-1.

fullSwipeThreshold
number"0.7"

Fraction beyond which an action marked fullSwipe is auto-triggered without tapping.

variant
'inline' | 'card' | 'compact'"'inline'"

Visual style. 'card' adds rounded corners and a border; 'compact' uses tighter padding.

disabled
boolean"false"

Disable the swipe gesture.

onSwipeOpen
(side: 'left' | 'right') => void

Called when the row settles open on one side.

onSwipeClose
() => void

Called when the row returns to closed.

closeOnSelect
boolean"true"

Auto-close after an action is tapped.

className
string

Additional CSS class for the wrapper.

actionWidth
number"80"

Pixel width per revealed action button.

Features

Left & right actions

Reveal independent action strips on either side of the row.

Per-action colors

Use the shared status palette: primary, success, warning, danger, neutral.

Full-swipe trigger

Mark a primary action with fullSwipe to fire it automatically on a long swipe.

Three variants

Inline rows, rounded cards, or compact dense rows.

Axis-locked drag

Vertical scrolling stays untouched — the row only intercepts clear horizontal gestures.

Imperative handle

Use a ref to programmatically open/close from outside.