Swipe Action
滑动操作
Press a list item and slide it left, and actions like delete or archive slide out from underneath.
Live Demo
Actually clickable- Email from iCloud9:41
- Weekly report · Team syncYesterday
- Billing reminderYesterday
What you just saw:Swiping left on an iOS mail list to reveal Archive / Flag / Delete, swiping left on a WeChat chat row to reveal Delete / Mark as unread, swiping a todo row left to expose a red delete button.
What it actually is
Swipe actions hide "rarely used but still necessary" operations inside a gesture. It keeps the list extremely clean, at the cost of discoverability — users may never realize they can swipe. The standard fix is to make long press open the very same menu.
Anatomy · What it's made of
Swipe Threshold触发阈值
Past 50% of the width or 30px
Row列表行
Moves with the finger
Action Buttons操作按钮
Revealed underneath, right-aligned
Snap吸附
Snaps open or closed on release
Fallback替代入口
Long press or right click opens the same menu
When to Use
When it fits, and when it doesn't| Situation | Use it? |
|---|---|
| Secondary actions inside a high-frequency list | Yes |
| Reversible actions such as delete or archive | Yes |
| The interface needs to stay extremely minimal | Yes |
| It is the most common primary action | No |
| A desktop environment driven by a mouse | No |
Discoverability is the hard flaw: you must ship a long-press or right-click entry point as an equivalent path.
Only one menu can be open at a time; two visible menus at once leaves users confused.
Similar Patterns
Don't mix these upSwipe ActionCurrent
滑动操作
Press a list item and slide it left, and actions like delete or archive slide out from underneath.
Context Menu
上下文菜单
The row of actions that pops up when you right-click something (or long-press it on a phone).
In one line:Press a list item and slide it left, and actions like delete or archive slide out from underneath.
Long Press
长按
Hold a finger down for about half a second and a row of options appears, or multi-select mode starts.
Context Menu
上下文菜单
The row of actions that pops up when you right-click something (or long-press it on a phone).
Pull to Refresh
下拉刷新
Pull down at the top of a list and release to reload the data.
List
列表
A single column of stacked items, where every row is the same kind of thing and the whole row is one target.
How to tell AI
Three levels of promptAdd the component name and specifics
Add swipe actions to list items: past 50% of the width, reveal two buttons, "Pin" (blue) and "Delete" (red); on release, snap open; tapping outside closes it.
Don't just say this to AI
Bad → BetterDon't say this to AI
The list can be swiped left to act.
Say this instead
Add Swipe Actions to list items: swiping left past 50% reveals "Pin" and "Delete" buttons and snaps open, tapping outside closes it, only one item may be open at a time, and a long press is provided as an equivalent entry point.
Share this card
Social-readyTurn this pattern into a 3:4 or 1:1 knowledge card and export it as PNG right in the browser. No backend needed.