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.

8 UI elements, 4 free, no build step

~~£99~~£79.20

Halloween: 20% off the Vault until 31 October. Ends in 15d 15h 17m 04s

UI Elements Pass

£50

Every current and future premium UI element and component kit. Includes all 48 premium UI elements and kits available now, plus every future release in this line.

The Vault

£79.20

All 295 premium items in the Vault library, plus future additions to the library.

ui-019 £10

Loading Submit Button

A loading submit button for any button: pass it a promise and it morphs into a spinner, then a drawn checkmark or an error shake, announced to screen readers.

micro-interactionmorphing

ui-020 Free

Progress Stepper

A progress stepper for checkouts and onboarding: the track fills to the active step and completed steps flip into a drawn checkmark.

progress-bartimeline-control

ui-024 Free

Skeleton Loader

A skeleton loader: shimmering placeholders crossfade into real content with a stagger, and each card's height eases to what it loaded.

load-sequencestagger

ui-025 £10

Animated Like Button

An animated like button: the icon springs, a particle burst fires and the count rolls over one digit at a time.

micro-interactionclick-state

ui-026 Free

Copy to Clipboard Button

A copy to clipboard button: the clipboard icon morphs into a drawn check, a Copied label floats up and the copied value flashes.

micro-interactionclipboard

ui-034 £10

Avatar Group

An avatar group for collaborators: overlapping avatars part on hover, one tooltip travels between them, with an overflow chip and roster.

staggermicro-interaction

ui-037 Free

Announcement Bar

An announcement bar for sites: pushes the page down instead of covering it, rotates messages with a masked swap and collapses on dismiss.

micro-interactionstagger

ui-056 £10

Activity Feed Timeline

An activity feed timeline: new events stream in at the top of a vertical rail, a filter Flip-collapses hidden kinds and times tick live.

Flip flip-layout

Browse all 59 UI elements

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.

1

Copy the three includes

Stylesheet, the GSAP CDN tag the component was built against, then its script, in that order.
2

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.
3

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.
4

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.

The variant block you edit

body[data-variant="vault"] {
  --surface: #16161c;
  --accent: #c8ff00;
  --success: #34d399;
  --error: #f87171;
}

Buttons & Feedback at a glance

Compare the 8 components in this category by what they do, what they are built with, and price.
Component	What it does	Built with	Price
Loading Submit Button	A loading submit button for any button: pass it a promise and it morphs into a spinner, then a drawn checkmark or an error shake, announced to screen readers.	GSAP core	£10
Progress Stepper	A progress stepper for checkouts and onboarding: the track fills to the active step and completed steps flip into a drawn checkmark.	GSAP core	Free
Skeleton Loader	A skeleton loader: shimmering placeholders crossfade into real content with a stagger, and each card's height eases to what it loaded.	GSAP core	Free
Animated Like Button	An animated like button: the icon springs, a particle burst fires and the count rolls over one digit at a time.	GSAP core	£10
Copy to Clipboard Button	A copy to clipboard button: the clipboard icon morphs into a drawn check, a Copied label floats up and the copied value flashes.	GSAP core	Free
Avatar Group	An avatar group for collaborators: overlapping avatars part on hover, one tooltip travels between them, with an overflow chip and roster.	GSAP core	£10
Announcement Bar	An announcement bar for sites: pushes the page down instead of covering it, rotates messages with a masked swap and collapses on dismiss.	GSAP core	Free
Activity Feed Timeline	An activity feed timeline: new events stream in at the top of a vertical rail, a filter Flip-collapses hidden kinds and times tick live.	Flip	£10

Related guides

59 animated UI components built with GSAP (2026)

59 animated UI components built with GSAP: navigation, modals, command palettes, tables, form controls and buttons. Eleven are completely free to download.

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.

Browse all UI elements What GSAP UI elements are