List with Swipe Actions

Swipe an email to the left in iPhone Mail: red Trash, orange Flag, grey More slide out from behind the row. Swipe a chat in WhatsApp: Archive. Swipe a saved card in a banking app: Remove. These rows look like a plain list until your finger moves, and then they become a little toolbar.

That hidden toolbar is where the bugs live. Which row is open? What happens when you scroll? Does “Archive” really archive? Can someone who can’t swipe still do the same thing? Let’s learn the component properly.

What is a list with swipe actions?

A list with swipe actions is a normal vertical list where each row hides extra actions that appear when you swipe the row sideways. Tapping the row still does the main thing (open the email, open the chat, open the product). Swiping is a shortcut for the secondary things you’d otherwise do from inside the item or from a menu.

You’ll find it in:

• Mail and messaging: Archive, Delete, Mark as read, Pin, Mute.
• Shopping: Remove from cart or wishlist, Move to “Save for later”.
• Banking and finance: Remove a saved payee or card, hide a transaction.
• To-do and notes: Complete, Delete, Flag.

Anatomy

Every row is a normal list item first. Learn its parts, because many bugs are “text overlaps chevron” or “secondary line missing” rather than anything to do with swiping.

Leading vs. trailing actions

The two sides have names that work in every language:

• Trailing actions sit at the trailing edge (the right in English) and appear when you swipe toward the leading edge (to the left). This is where destructive actions live: Delete, Archive, Remove.
• Leading actions sit at the leading edge (the left in English) and appear when you swipe to the right. They’re usually positive and reversible: Mark as read, Pin, Add to cart.

In right-to-left languages like Arabic and Hebrew (RTLRight-to-left (RTL)Languages like Arabic and Hebrew that read right to left; layouts and controls must be mirrored.Open in glossary →), everything mirrors: trailing actions appear on the left. A row that still reveals Delete on the right in Arabic is a localization bug.

Reveal buttons vs. full swipe

There are two ways a swipe can end:

Style	What happens	Risk
Reveal	A short swipe snaps the row open and shows buttons. You tap one.	Low: two steps, you see what you’ll get
Full swipe	Keep swiping past a point and the outermost action runs on release	Higher: one movement, easy to do by accident
Swipe to dismiss	No buttons; the row slides away and the action runs (Gmail style)	Highest: must come with Undo

iOS uses reveal + optional full swipe (iPhone Mail: a full swipe left trashes or archives). Android apps usually use swipe to dismiss with a colored background and an icon (Gmail archives). A good full swipe gives feedback at the point of no return: the outermost button stretches across the row and the phone gives a small hapticHaptic feedbackA short vibration that confirms an action without the user needing to look at the screen.Open in glossary → tick. If you let go before that point, nothing happens.

How it differs from similar patterns

Swipe actions are never the only way to do something. These are the patterns they’re usually paired with:

Pattern	How it’s triggered	Good for
Swipe actions	Swiping one row	Fast, frequent actions on one item
Edit mode	An Edit or Select button, then checkboxes	Acting on many items at once
Long-press menu	Touch and hold a row	Discoverable list of all actions
Buttons in the detail view	Open the item, use its toolbar	The always-available, visible path

Designs & variants

The same idea looks and behaves differently on each platform. Try each one with your finger or by dragging with a mouse.

Inbox

Read

TrashFlag

FreshCart9:38Your groceries are on the way

Unread

TrashFlag

Northwind Bank8:47Your statement is ready

Read

TrashFlag

SkyTrail Airlines8:02Check-in is open

Unread

TrashFlag

PulseFitYesterday5-day streak, nice!

Unread

TrashFlag

StayWell HotelsSunBooking confirmed

Search in mail

Primary

CCityRideYour weekend trips

EEmma ClarkeDinner on Friday?

BBookNookYour loan is due soon

DDaniel NovakRe: Sprint review slides

TTax OfficeReminder: file by Oct 31

shop.example.com

Saved addresses

• Home12 Baker Street, London
• Office5 Canal Road, Leeds
• Mom88 Elm Avenue, York

Reset all three

Dev note

On iOS these are swipe actions (swipeActions in SwiftUI, UISwipeActionsConfiguration in UIKit). On Android you’ll hear swipe to dismiss (SwipeToDismissBox in Jetpack Compose, ItemTouchHelper for RecyclerView). On the web there is no standard; teams build it themselves or use a library.

When to use it

Swipe actions are a good choice when:

• People process many items, one after another: triaging an inbox, clearing notifications, checking off a shopping list.
• The actions are frequent and quick (one tap or one swipe), like Archive or Mark as read.
• The same actions are also available elsewhere: in the item’s detail screen, a long-press menu or an edit mode.
• The result is easy to undo, or the action is protected by Undo or a confirmation.

Good and bad uses

How good swipe rows behave

These are the rules to test against. Most of them aren’t written in any requirement, but users expect them because the built-in apps behave this way.

Only one row is open at a time

Open the actions on one row, then start swiping another: the first row closes. Two open rows look broken and, worse, can confuse the code about which item an action belongs to.

An open row closes when you do something else

Scrolling the list, tapping the open row, tapping another row, pulling to refresh or leaving the screen should all close the open row. Tapping an open row should only close it, not also open the item.

The action happens to the right item

The button you tap must act on its own row, even after you’ve scrolled, after another row was deleted, or after new items arrived at the top. In long lists, rows are recycled (the same row view is reused for a different item as you scroll). If the “open” state is stored on the recycled view or by position instead of by item, it jumps to the wrong item. That’s a state persistenceState persistenceWhether the app remembers what the user did after navigating away, rotating, or restarting.Open in glossary → bug in disguise.

Dev note

Rows are recycled in UITableView, RecyclerView, LazyColumn and most web virtual lists.

Labels tell the truth

“Archive” must archive (the item can be found in Archived), “Delete” must delete (maybe to a Trash folder), “Mute” must mute. Check the result after the action, not just that the row disappeared.

Destructive actions: Undo or confirmation

Use…	When	Example
Undo in a toastToastA short, temporary message that appears briefly and disappears on its own, like 'Message sent'.Open in glossary → or snackbar	The action is common and easy to reverse	Archive a chat, delete an email to Trash
Confirmation (an action sheet or dialog)	The action is permanent or expensive to reverse	Delete a saved card, cancel a booking
Neither	Only when the action is harmless	Mark as read, Pin

Don’t confirm everything: a dialog on every archive teaches people to tap Delete without reading. And Undo must really restore the item, in its original position, with its state (unread, pinned) intact.

Haptics and feedback

While swiping, the row should show what will happen: the color, icon and label of the action. On iOS a full swipe gives a light haptic tick when it passes the point of no return. Haptics should follow the system setting and can only be checked on a real deviceReal deviceA physical phone or tablet used for testing, as opposed to an emulator or simulator.Open in glossary →.

Large text, small screens and RTL

With the largest text size (Dynamic TypeDynamic TypeThe phone setting that lets users make text bigger or smaller across apps.Open in glossary → on iOS, Font size on Android), the row grows taller, text wraps or truncates inside its own area, and the action buttons grow with it. Text must never run underneath or on top of the buttons. In RTL languages, the sides swap.

Long lists stay smooth

A list of 2,000 transactions must scroll and swipe without stutter. Rows are usually created only when they come on screen (lazy loadingLazy loadingLoading images or content only when the user scrolls near them.Open in glossary →, infinite scrollInfinite scrollLoading more items automatically when the user reaches the bottom of a list.Open in glossary →). Test swiping right after scrolling fast, and on an older, slower phone.

Try it: swipe lab

This wishlist does everything right. Change the settings, then try to break it: open two rows, scroll with a row open, remove an item and undo it, switch to the largest text, and use Edit to remove items without any gesture. Watch the event log.

9:41

Edit

Wishlist

Add to cart

RemoveShare

Noise-canceling headphonesBack in stock€199

Add to cart

RemoveShare

Trail runner 2Size 42 · Blue€89

Add to cart

RemoveShare

Pour-over coffee setPrice dropped 15%€34

Add to cart

RemoveShare

Linen shirtOnly 2 left€49

Add to cart

RemoveShare

Smart watch S3Ships in 3 days€249

Add to cart

RemoveShare

Desk lampWarm white€39

Full swipe

OnOff

Text size

DefaultLargest

After Remove

Undo toastConfirm firstNothing (risky)

Haptic: waiting for a full swipe

Event log

Reset

• Drag a row left or right with your finger or mouse…

Try: open one row, then swipe another. Scroll while a row is open. Tab through the list with a keyboard: focusing an action reveals it.

Common bugs

#	Bug	What you see	Typical severity
1	Several rows open	Two or more rows show their buttons at the same time	Low–Medium
2	Action hits the wrong item	Tap Delete on “Mom”, and “Emma” disappears	Critical
3	Row stays open	Buttons still showing after scrolling, opening the item or coming back	Low–Medium
4	Tap on an open row opens the item	Instead of closing, the row opens the detail screen	Low
5	Label lies	“Archive” deletes; “Mark as read” also mutes	High
6	State jumps to another row	After a delete, or after scrolling a long list, a different row appears open	Medium–High
7	No Undo / no confirmation	A permanent delete happens with one swipe	High
8	Layout breaks	Text runs over the buttons at large text sizes; labels truncate in German	Medium
9	Gesture-only	No edit mode, menu or detail button; screen reader users can’t reach the action	High (for affected users)
10	Not mirrored in RTL	In Arabic, Delete still appears on the right	Medium

Find the bug

This chat app has swipe actions on every row and six bugs in the component. It has the right threshold and a direction lock, so this time the gesture isn’t the problem. Explore it like a tester:

• Open the actions on two chats. Then try the buttons.
• Leave a row open and scroll. Tap an open row.
• Archive a chat, then look for it. Compare with the Archive button inside a chat.
• Delete a chat and look at the row that moves up.
• Use the device panel: Larger text and VoiceOver.

🐞 Bug hunt: Chats

This demo has 6 hidden bugs. Explore it like a tester, then check your findings.

Found0/6

9:41

Chats

Archived0

EEmma Clarke9:41Booked the ramen place for 8pm, see you there!2

MMom9:30Did you get the parcel I sent last week?1

RRunning club9:12Marco: Saturday 9am at the park entrance, bring water

DDaniel Novak8:55Can you review the sprint slides before lunch?

LLandlord (Mia)8:20The plumber comes Tuesday between 10 and 12

FFreshCart supportYesterdayYour refund of €12.40 has been processed

SSofia RossiYesterdayPhotos from the trip are in the shared album

BBook clubMonNext pick: The Pragmatic Programmer. Thoughts?

LLeo (Flatmate)MonWe are out of coffee again…

GGrandpaSunHappy birthday! Call me when you can

TTeam lunchSatAnna: Thai or pizza on Friday?

CCityRideFriYour verification code is 482 913

Device

Restart app

Larger text (accessibility size)VoiceOver (simulated)

Drag a chat left or right with your mouse or finger. Scroll with the wheel or by swiping up and down.

1. 1

   Hint: Open the actions on two different chats, then tap Archive on the second one.

   Tapping an action on one row affects a different row

   Opening a second row doesn’t close the first, and every action button acts on the first open row. Archiving “Running club” removes “Emma Clarke” instead. Expected: only one row is open at a time, and each button acts on its own row.

   Reveal answer✓ I found this
2. 2

   Hint: Open a row, scroll the list, then tap the open row.

   Open rows stay open while scrolling, and tapping one opens the chat

   The buttons stay revealed during and after scrolling, and a tap on the open row opens the chat. Expected: scrolling closes the open row, and tapping an open row only closes it.

   Reveal answer✓ I found this
3. 3

   Hint: Swipe-archive a chat, then open the Archived folder at the top of the list.

   “Archive” deletes the chat

   The snackbar says “Chat archived”, but the chat never appears in Archived (the count stays 0). It’s gone for good once the snackbar disappears. The Archive button inside a chat works correctly, which proves the swipe action does something different. Expected: both paths move the chat to Archived.

   Reveal answer✓ I found this
4. 4

   Hint: Turn on Larger text, then swipe a chat to the left.

   Message preview runs over the buttons with large text

   At the accessibility text size, the preview no longer truncates with an ellipsis. It runs out of its area, over the unread badge and across the revealed Archive and Delete buttons. Expected: text truncates or wraps inside the row; buttons stay readable.

   Reveal answer✓ I found this
5. 5

   Hint: Turn on VoiceOver, tap a chat and listen for the actions.

   Swipe actions are not available to VoiceOver

   VoiceOver reads the chat but never says “Actions available”, and swiping down finds no actions. Archive, Delete and Read can’t be reached from the list at all. Expected: each swipe action is exposed as an accessibility custom action (iOS) / TalkBack action (Android).

   Reveal answer✓ I found this
6. 6

   Hint: Swipe a chat left, tap Delete, and look at the chat that moves up.

   After a delete, the next chat appears already open

   The open state is stored by row position, not by chat. After the delete, the next chat slides into that position and shows its Archive and Delete buttons, one tap away from a second accidental delete. Expected: after an action, no row is left open.

   Reveal answer✓ I found this

How to test it

Checklist

Swipe actions test checklist

0 of 14 checked

Copy

• Each row shows the right leading and trailing actions, with clear labels and icons
• A short swipe snaps open or closed; it never stops halfway
• Full swipe (if supported) runs only the outermost action, with visual and haptic feedback
• Only one row is open at a time
• Scrolling, tapping the open row, or leaving the screen closes the open row
• Every action affects its own row, also after deletes, inserts, refreshes and fast scrolling
• The result matches the label (Archive really archives, Delete really deletes)
• Destructive actions have Undo or a confirmation, and Undo restores the item in place
• No row is left open after an action
• Every swipe action is also available without swiping (detail view, long-press menu or edit mode)
• VoiceOver and TalkBack offer the swipe actions as accessibility actions
• Layout holds at the largest text size, in long languages and in RTL (sides mirrored)
• Swiping works with a finger, a stylus, and (web) a mouse or trackpad if supported
• Long lists stay smooth while swiping and scrolling on an older device

Example test cases

Tools

• Accessibility Inspector (Xcode › Open Developer Tool) shows a row’s Custom Actions. If the list is empty, VoiceOver users can’t reach the swipe actions.
• Android Studio Layout Inspector and the Accessibility Scanner app show whether a row has accessibility actions; TalkBack’s Actions menu is the real-world check.
• Settings for stress: largest text size, a long language (German), an RTL language (Arabic), and Reduce Motion (the row should still open and close, just without the slide).
• Network log or proxy toolProxy toolA program that sits between the app and the server so you can watch and change network traffic.Open in glossary →: after Archive or Delete, check that one request goes to the server, for the right item ID. Then reopen the app to make sure the change was saved and not only hidden on screen.

Accessibility

Swiping is a path-based gesture, so it’s one of the hardest things to do for people with tremors, limited dexterity, or who can’t see the screen. Check these:

• Screen readers: with VoiceOver or TalkBackScreen readerSoftware that reads the screen aloud for blind and low-vision users, like VoiceOver or TalkBack.Open in glossary → on, a swipe moves focus, it never reaches the row. Every swipe action must be exposed as an accessibility action. On iOS, standard swipe actions do this automatically (“Actions available”, then swipe up or down to choose). TalkBack lists them in its Actions menu.
  Dev note

  Standard swipe actions are the ones in List and UITableView. Custom-built rows need accessibilityCustomActions (UIKit) or .accessibilityAction (SwiftUI). On Android, Compose uses customActions in semantics; Views use ViewCompat.addAccessibilityAction.
• A visible alternative: WCAGWCAGThe Web Content Accessibility Guidelines, the main international standard for accessibility.Open in glossary → 2.5.1 Pointer Gestures (Level A) requires a single-pointer way without a path, such as a button in the detail view, a long-press menu or an Edit mode. Voice Control and Switch Control users rely on these.
• Clear labels: icon-only action buttons need text labels for assistive tech (“Archive”, not “button”).
• Announce the result: after Archive or Delete, the screen reader should hear “Chat archived” and focus should move to a sensible place (the next row), not jump to the top.
• Touch targetsTouch targetThe area of the screen that responds to a tap, which should be large enough for a finger.Open in glossary →: revealed buttons are at least 44×44 pt (iOS) / 48×48 dp (Android), and as tall as the row. On the web, WCAG 2.5.8 (AA) asks for at least 24×24 CSS px; 44×44 px (2.5.5, AAA) is the comfortable target.
• Keyboard (web): every action is reachable with Tab and Enter. Hover-only buttons must also show on focus. See Accessibility basics.

Mobile vs web

iOSAndroidWeb

Dev note

Built in: SwiftUI .swipeActions (with allowsFullSwipe) and .onDelete, UIKit UISwipeActionsConfiguration (performsFirstActionWithFullSwipe is on by default). Edit mode: EditButton.

• Leading and trailing actions, reveal buttons plus full swipe of the outermost action.
• Edit mode gives red delete circles and multi-select: the standard alternative.
• Standard rows expose swipe actions to VoiceOver for free; custom rows often don’t.

• No standard “reveal buttons” component in Material Design. Most apps use swipe to dismiss with one action per direction and a snackbar Undo.
  Dev note

  Compose SwipeToDismissBox, RecyclerView ItemTouchHelper.
• The common alternative is selection mode: long press or tap the avatar, then use the top app bar.
• Watch for the system Back gesture from the screen edges colliding with row swipes.
• Test TalkBack’s Actions menu and Switch Access.

• No native component: built by hand or with a library, so quality varies a lot.
• Check that vertical scrolling still works on swipeable rows.
  Dev note

  Swiping needs Pointer or Touch Events and touch-action: pan-y so vertical scrolling still works.
• Mobile browsers use edge swipes for Back / Forward, which can clash with row swipes.
• Always provide visible buttons or a menu for mouse, keyboard and assistive tech.

Check your understanding

Quick quiz

0/5 answered · 0 correct

1. 1.In English, where do trailing swipe actions like Delete usually appear?

   AOn the left, after swiping rightBOn the right, after swiping leftCAt the top of the listDOnly in edit mode

2. 2.You delete the second chat, and the chat that moves into second place shows its buttons already open. What is the most likely cause?

   AA network timeoutBThe open state is stored by row position instead of by itemCThe swipe threshold is too lowDDark mode is on

3. 3.Which is the best protection for deleting a saved bank card with a swipe?

   ANothing, swipes are deliberateBAn Undo toast for 2 secondsCA confirmation that names the cardDA haptic tick

4. 4.VoiceOver is on. How should a user archive a chat from the list?

   ASwipe the row left with one fingerBFocus the row, swipe down to the "Archive" action, double tapCShake the phoneDIt is fine if they can't

5. 5.Which is NOT expected behavior for a good swipe row?

   AScrolling closes the open rowBTapping an open row opens the itemCOnly one row is open at a timeDUndo restores the item in place

Key takeaways

• Swipe actions are shortcuts on list rows: trailing (swipe left) for destructive actions, leading (swipe right) for positive ones, mirrored in RTL.
• Know the three styles: reveal buttons, full swipe and swipe to dismiss, and the feedback each needs.
• Test state: only one row open, rows close on scroll and tap, actions hit the right item, nothing inherits an open state after a delete.
• Check that labels tell the truth and that destructive actions have Undo or confirmation.
• Every swipe action needs an alternative: edit mode, long-press menu or detail button, plus accessibility actions for VoiceOver and TalkBack.