Button & Feedback Components
Feedback states are the moments a product proves it noticed you: the button that becomes a spinner and then a tick, the copy button that confirms, the skeleton that resolves into content. Small components, but they are what "feels finished" actually means.
6 UI elements · 1 free · no build step
£50
Every current and future premium UI element. 33 today, and every one we add to this line.
£99
All three lines: 65 effects, 54 templates and 33 UI elements. 152 today, plus everything we release next.
The small states that make an app feel finished
The morphing submit button is the family's centrepiece because it solves a real interaction problem: between click and server response, a default button just sits there inviting a second click. This one morphs into its loading state immediately, disables itself for the duration, and resolves into success or error, so the user gets acknowledgement in the same frame they acted.
The skeleton-to-content reveal treats loading as choreography rather than replacement: placeholder blocks hold the layout, then content fades and settles into exactly the space the skeleton reserved, which is what prevents the reflow jump that makes loading feel broken. Step progress indicators animate the connector between steps, so progress reads as movement along a path instead of a repainted diagram.
The reaction burst and copy-to-clipboard buttons are single-purpose acknowledgements: a particle burst that confirms a like without a dialog, a copy button that swaps to a tick and back. The presence avatar cluster animates people joining and leaving a shared context. Each one is a few kilobytes and one markup block.
They are all state machines first and animations second: the states exist and transition correctly even under prefers-reduced-motion, when the tweens collapse to instant changes. Wiring is one function call or event per component, documented at the top of its script.
How to wire feedback states to your logic
Feedback components expose their states as plain functions or attributes; your code decides when, the component handles how it looks.
- 01
Copy the three includes
Stylesheet, the GSAP CDN tag the component was built against, then its script, in that order.
- 02
Paste the component markup
The button, indicator or skeleton block goes exactly where the native element would. Keep the ids or update the selectors at the top of the script.
- 03
Call the state changes from your code
Each component exposes plain functions: start loading, resolve success, resolve error, advance a step. Call them from your submit handler or fetch callback; the demo wiring shows each one.
- 04
Pick a variant, then retune its tokens
Success, error, accent and surface colours are custom properties per variant, so the states match your brand without touching the script.
body[data-variant="vault"] {
--surface: #16161c;
--accent: #c8ff00;
--success: #34d399;
--error: #f87171;
}Buttons & Feedback at a glance
| Component | What it does | Built with | Price |
|---|---|---|---|
| Morphing Submit Button | A submit button that collapses into a spinner pill, then expands into a success state with a stroke-drawn checkmark. | GSAP core | £5 |
| Step Progress Indicator | Numbered steps joined by a track whose fill tweens to the active step, with completed nodes flipping their number into a drawn checkmark. | GSAP core | £5 |
| Skeleton to Content Reveal | Shimmering placeholder cards that crossfade into real content with a stagger, each card's height tweening from the placeholder shape to the content it loaded. | GSAP core | £5 |
| Reaction Burst Button | A like button that springs its icon, throws a radial burst of pooled particles and rolls its count over one digit at a time. | GSAP core | £5 |
| Copy to Clipboard Button | A snippet block whose copy button morphs its clipboard icon into a stroke-drawn check, floats a Copied pill up beside it and flashes the code it took. | GSAP core | Free |
| Presence Avatar Cluster | Product-scale collaborator facepile: overlapping avatars that part on hover, one tooltip that travels between them, an overflow chip and a roster popover. | GSAP core | £5 |
Frequently Asked Questions
Does the morphing submit button prevent double submissions?
Yes. Entering the loading state disables the button until your code resolves it to success or error, so the window for a second click is closed in the same frame as the first.
Will the skeleton reveal cause layout shift when content loads?
No, preventing that is its job. The skeleton blocks reserve the content's dimensions, and the reveal transitions within that reserved space, so the page around it never reflows.
How do I connect these to my actual requests?
Each component exposes its states as plain functions you call: put the loading call in your submit handler and the resolve call in your response handler. There is no framework binding to learn; the demo page shows the wiring.
Do the animations still convey state under reduced motion?
Yes. The states are real and switch instantly when prefers-reduced-motion is set: the button still shows loading, success and error, without the morphing between them.
