←Back to Patterns
UI Patterns Learning App
👆 Swipe Actions Pattern
Reveal contextual actions by swiping on list items, providing quick access to common operations.
🎯 Interactive Example
Swipe left or right on any item to reveal actions. Swipe left for delete, swipe right for archive.
Email from John Doe
Meeting tomorrow at 2 PM
Project Update
Q4 goals have been achieved
System Notification
Backup completed successfully
Team Message
New team member joining next week
How to Use
• Swipe left to reveal delete action (red)
• Swipe right to reveal archive action (blue)
• Tap the action button to execute
• Tap the item to reset the swipe
💻 Code Example
JSX
Loading source code...
✨ Key Features
✓
Bidirectional Swipes
Swipe left or right for different actions
✓
Visual Feedback
Clear indication of available actions
✓
Threshold Detection
Actions trigger only when threshold is met
✓
Smooth Animations
Fluid transitions and visual feedback
✓
Touch & Mouse Support
Works on both mobile and desktop
✓
Accessibility
Keyboard navigation and screen reader support
🎯 Use Cases
📧
Email Apps
Archive, delete, or mark as read
📱
Mobile Lists
Quick actions on list items
💬
Chat Applications
Pin, archive, or delete messages