All changes saved
Save State Pill
Spring-morphing toolbar status indicator with offline queuing, error recovery, and relative timestamps.
Dependencies
motion/reactlucide-react
Interaction
The status surface expands between six sync states with a layout spring. Saved feedback transitions to a relative timestamp after 2.5 seconds, while browser connectivity can override the supplied state.
Props
| Prop | Type | Description |
|---|---|---|
| state | SaveState | Document and synchronization state to display. |
| lastSavedAt | Date | string | null | Timestamp used to calculate the relative saved label. |
| onRetry | () => void | Called when the Retry action is activated. |
| onReviewConflict | () => void | Called when the Review action is activated. |
| className | string | Additional classes applied to the status pill. |
| interactiveDemo | boolean | Shows six state controls and lets the preview change its own state. |
MIT License. Free to use in personal and commercial projects. Built for Peel UI.