# Button & Feedback Components

> Submit buttons that morph through loading and success, step progress indicators, skeleton reveals, reaction bursts and copy-confirm buttons, all built on GSAP.

Canonical: https://gsapvault.com/ui-elements/category/feedback-status

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.

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

```css
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](https://gsapvault.com/ui-elements/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](https://gsapvault.com/ui-elements/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](https://gsapvault.com/ui-elements/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](https://gsapvault.com/ui-elements/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](https://gsapvault.com/ui-elements/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](https://gsapvault.com/ui-elements/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 |

## Components in This Category

### Morphing Submit Button

A submit button that collapses into a spinner pill, then expands into a success state with a stroke-drawn checkmark.

- Type: UI component · Tier: premium · Difficulty: intermediate
- [View component](https://gsapvault.com/ui-elements/morphing-submit-button)
- [Clean Markdown for AI agents](https://gsapvault.com/ui-elements/morphing-submit-button.md)

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

- Type: UI component · Tier: premium · Difficulty: intermediate
- [View component](https://gsapvault.com/ui-elements/step-progress-indicator)
- [Clean Markdown for AI agents](https://gsapvault.com/ui-elements/step-progress-indicator.md)

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

- Type: UI component · Tier: premium · Difficulty: intermediate
- [View component](https://gsapvault.com/ui-elements/skeleton-to-content-reveal)
- [Clean Markdown for AI agents](https://gsapvault.com/ui-elements/skeleton-to-content-reveal.md)

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

- Type: UI component · Tier: premium · Difficulty: intermediate
- [View component](https://gsapvault.com/ui-elements/reaction-burst-button)
- [Clean Markdown for AI agents](https://gsapvault.com/ui-elements/reaction-burst-button.md)

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

- Type: UI component · Tier: free · Difficulty: beginner
- [View component](https://gsapvault.com/ui-elements/copy-to-clipboard-button)
- [Clean Markdown for AI agents](https://gsapvault.com/ui-elements/copy-to-clipboard-button.md)

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

- Type: UI component · Tier: premium · Difficulty: intermediate
- [View component](https://gsapvault.com/ui-elements/presence-avatar-cluster)
- [Clean Markdown for AI agents](https://gsapvault.com/ui-elements/presence-avatar-cluster.md)

## Related Guides

- [35 animated UI components built with GSAP (2026)](https://gsapvault.com/blog/gsap-ui-components) ([Markdown](https://gsapvault.com/blog/gsap-ui-components.md)): 35 animated UI components built with GSAP: navigation, modals, command palettes, tables, form controls and buttons. Two 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.

## Related Categories

- [Input & Control Components](https://gsapvault.com/ui-elements/category/inputs-controls)
- [Overlay & Dialog Components](https://gsapvault.com/ui-elements/category/overlays-dialogs)

---

From [GSAP Vault](https://gsapvault.com): production-ready GSAP animation effects, UI components and complete website templates. Full catalog for agents: https://gsapvault.com/llms-full.txt