feedback
Inline Save State
Keeps edited, saving, saved and failed persistence feedback beside the field that owns the change.
- feedback
- save
- persistence
- inline
- retry
Persistence feedback stays attached to the edited surface instead of moving to a detached notification.
Live preview
Quick usage
import { InlineSaveState } from "@pinky-ui/systems";
<InlineSaveState label="Project title" onSave={saveTitle} />Install
Add @pinky-ui/systems as a dependency, or use the CLI to copy this component's source directly into your project — no dependency to manage, fully editable.
npm install @pinky-ui/systemspnpm add @pinky-ui/systemsyarn add @pinky-ui/systemsnpx pinky-ui add inline-save-statePrefer to run the whole repository locally instead?
git clone https://github.com/florash/Pinky-UI.git
cd Pinky-UI
npm install
npm run devAccessibility
- Pointer and keyboard paths expose the same state change.
- Status and focus remain meaningful when motion is disabled.
Performance
- Uses local state and transforms; no per-frame React pointer loop.
Reduced motion
Resolves state changes without layout animation while preserving semantics.
When to use
- Product workflows with a clear reversible or inspectable state.
When not to use
- Decorative motion without a user task.
Skill
Purpose
Keep edited, saving, saved and failed persistence feedback beside the field that owns the change.
Use when
A local edit has a short persistence lifecycle and the user benefits from retaining the surrounding field context.
Avoid
Replacing validation with a save label, showing a detached notification for every keystroke, or claiming saved before the callback resolves.
Accessibility
Expose busy state while saving, associate the status with the field, and use an alert only for a genuine save failure. Keep the value readable in every state.
Keyboard and touch
Enter can save, the Save control is native, and the recovery action remains a full-size touch target. Do not require blur or pointer hover to discover persistence state.
Reduced motion and performance
Keep the field geometry stable and resolve status immediately when motion is reduced. Cancel or ignore stale persistence work after unmount.
Composition and anti-patterns
Use local status for local persistence. Inline Feedback can describe a small result, but it should not replace the field's own saving ownership.