Skip to content
gauchocodeUI GALLERY
LIBRARY
All blocks58Data display15Navigation & shell14Forms & actions7Planning12Feedback & overlays4AI & automation4Apps & admin2
RESOURCES
CommunityTeam library
GC
GauchoCodeEngineering & design
v0.1
WorkspaceUI Gallery
CommunityTeam library
BlocksForms & actionsSave & sync buttons

Save & sync buttons

Adapted

Saving or syncing, said in the button. A fill sweeps across it instead of a separate spinner: determinate Save, indeterminate Sync, and a multi-stage Publish.

ProgressSavingSync
React · CSS
Origin & adaptation notes

A progress-fill button pattern for save/sync actions: a translucent currentColor fill grows from the left edge instead of graying the button out or opening a separate spinner or toast. Save is a single-stage determinate fill; Sync is indeterminate (duration and outcome unknown up front) and sweeps a moving segment, landing on success or a retryable error; Publish chains three determinate stages (validate, upload, publish) across one bar. aria-busy communicates the in-flight state; every run is simulated locally.

Curated adaptation. Synthetic data only. No production APIs.

PreviousButton variantsNextRich text editor
Built with intention. Shared with the team.GauchoCode UI Gallery ✳