Action response

Feedback & Validation Micro-Interactions

Feedback closes the loop between an action and the system response. It should arrive near the control that caused it, use plain text alongside color or motion, and remain long enough to be understood without slowing the next task.

Confirm receipt: Show that the click registered before work finishes.
Name the result: Use text for success and errors, not color alone.
Avoid interruption: Reserve blocking feedback for blocking problems.

Pattern examples

6 ways to communicate the state change

Hover, focus, press, or toggle the specimens. Each recipe keeps the durable state in semantic markup and uses animation as a supporting layer.

Loading button

Replace or accompany the action label with a compact spinner while work is pending.

Disable duplicate submission but keep the original action understandable in the pending label.

animation: spin 700ms linear infinite;

Enter a complete email.

Shake error

Use one short horizontal shake to direct attention to an invalid field.

Pair it with an error message and stop after one cycle; repeated shaking becomes noise.

animation: shake 240ms ease-out 1;

Saved

Success check

Resolve a pending state into a stable success mark and concise label.

Keep the result visible after the drawing animation completes.

animation: check-in 220ms cubic-bezier(.34, 1.56, .64, 1);

Copy feedback

Change “Copy” to “Copied” beside the same control after clipboard success.

Only confirm after the clipboard promise succeeds, and restore the original label calmly.

transition: color 150ms ease-out, opacity 150ms ease-out;

Theme exported successfully.

Notification slide

Bring a non-blocking status message in from the nearest viewport edge.

Do not make important information disappear before keyboard and screen-reader users can reach it.

animation: notice-in 250ms ease-out;

Tooltip fade

Fade and lift a short explanation beside its trigger after a deliberate hover or focus.

Open on keyboard focus too, and never hide information required to complete the task in a tooltip.

transition: opacity 150ms ease-out, translate 150ms ease-out;

Implementation check

Ship the fallback with the effect.

Test keyboard focus, touch, reduced motion, slow work, failure, repeated activation, and the final resting state. A robust interaction remains understandable when every transition is removed.

@media (prefers-reduced-motion: reduce) {
  .motion {
    animation: none;
    transform: none;
    transition-duration: 0.01ms;
  }
}

Continue the reference

Related micro-interaction guides

Compare the neighboring feedback patterns before choosing an effect.

View all patterns

Buttons & formsExplore toggle, search, checkbox, counter, and press micro-interactions with practical timing, accessibility, and CSS examples.Read guide Status & progressUse skeletons, progress bars, spinners, and pulsing dots to communicate loading states and task completion without layout shifts.Read guide Navigation & transitionsRoute progress bars, sliding tab indicators, view transitions, condensing headers, and scroll progress that keep navigation legible.Read guide

Plan the complete React experience.

Map the components and states around these interactions, then generate the project structure from one visual workspace.

Start planning free