Swipe Actions

PRO

Touch-friendly swipe gesture component with multi-directional support, progressive actions, and customizable animations

Pro Features

Unlock advanced capabilities with the Pro version

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-actions

Usage

Pro Required

Important Email

Swipe left to delete, right to archive

← Delete

Archive →

Examples

Multi-Directional Swipe

PRO

Swipe in all four directions for different actions

Pro Required

Swipe in Any Direction

← Delete

Archive →

↑ Star

↓ Share

Live Swipe Progress

PRO

onSwipeStart, onSwipeProgress and onSwipeEnd wired to a live readout

Pro Required

Standup reminder

Swipe left to snooze, right to archive

onSwipeStartidle

onSwipeProgress0%

onSwipeEndDrag the row to watch the callbacks fire

Analytics & Undo

PRO

onActionExecute feeds an activity log; autoReset={false} returns the row immediately

Pro Required

Q4-forecast.xlsx

brand-guide.pdf

roadmap.key

onActionExecute log

no events yet

Confirm Before Destructive

PRO

requireConfirm + confirmRequired open a confirmation chip; autoReset withdraws it after resetDelay

Pro Required

Alex Johnson

Swipe left, then tap the chip to confirm

Compliance record

disabled: swipe and keyboard are both inert

No record deleted yet

Progressive Actions

PRO

Multiple actions revealed as you swipe further

Pro Required

Progressive Disclosure

Swipe further to reveal more actions

60px: Star

120px: Flag

180px: Delete

Animation Types

PRO

Different animation styles for swipe interactions

Pro Required

Spring

← Swipe to test

Spring Animation

Bounce

← Swipe to test

Bounce Animation

Ease

← Swipe to test

Ease Animation

Email List Actions

PRO

Real-world email management with multiple actions

Pro Required

Sarah Chen

10:30 AM

Q4 Planning Meeting

Marketing Team

Yesterday

New Campaign Launch

John Smith

2 days ago

Project Update Required

Task Management

PRO

Task list with complete, edit, and delete actions

Pro Required

Complete project documentation

high

Today

Review pull requests

medium

Tomorrow

Update team on progress

low

This week

Prepare presentation slides

high

Friday

Social Media Actions

PRO

Like, comment, share, and more actions

Pro Required

Alex Johnson

2 hours ago

Just launched our new feature! 🎉 Check it out and let me know what you think.

42 8 5

← Like

Comment →

Custom Styling & Sizes

PRO

Customize action sizes, spacing, and progress indicators

Pro Required

Small Style

Size: 40px, Spacing: 6px

← Swipe to see small action

Medium Style

Size: 52px, Spacing: 10px

← Swipe to see medium action

Large Style

Size: 64px, Spacing: 14px

← Swipe to see large action