Swipe Actions
Touch-friendly swipe gesture component with multi-directional support, progressive actions, and customizable animations
Pro features
What the Pro version adds to this component.
Multi-Directional
Swipe in all four directions (left, right, up, down) for different actions
Progressive Actions
Multiple actions per direction with threshold-based disclosure
Haptic Feedback
Optional vibration feedback on action trigger for enhanced UX
Auto-Reset
Configurable auto-reset with customizable delay after action
Animation Types
Spring, bounce, ease, and linear animations with full customization
Keyboard Support
Arrow keys reveal and run the matching action, with an aria-live announcement for screen readers
Installation
Install via CLI
npx @moontra/moonui-cli add swipe-actionsUsage
Important Email
Swipe left to delete, right to archive
Examples
Multi-Directional Swipe
Swipe in all four directions for different actions
Live Swipe Progress
onSwipeStart, onSwipeProgress and onSwipeEnd wired to a live readout
Analytics & Undo
onActionExecute feeds an activity log; autoReset={false} returns the row immediately
Confirm Before Destructive
requireConfirm + confirmRequired open a confirmation chip; autoReset withdraws it after resetDelay
Progressive Actions
Multiple actions revealed as you swipe further
Animation Types
Different animation styles for swipe interactions
Email List Actions
Real-world email management with multiple actions
Task Management
Task list with complete, edit, and delete actions
Social Media Actions
Like, comment, share, and more actions
Custom Styling & Sizes
Customize action sizes, spacing, and progress indicators