Copy Confirmation
A copy button trades its icon for a drawn tick and its label for "Copied", then quietly changes back.
The animated component in this preview is rendered from the canonical file shown here. The surrounding demo shell only provides context and is not part of the copied code.
import { useEffect, useState } from "react";
import { motion, useReducedMotion } from "motion/react";
/**
* Vibary · Copy Confirmation
*
* A copy button that trades its icon for a drawn tick and its label for
* "Copied", then quietly changes back.About this pattern
The smallest useful piece of feedback in a product: proof that the click landed. The icon swaps on a tight spring while the tick strokes itself in, the word changes underneath it, and both revert a second and a half later without being asked. The whole pattern is built around one constraint — the button must not resize. Icon and label are each stacked in a single grid cell so the button reserves the wider of the two states up front, which means the swap can happen without the surrounding row reflowing and without the label scaling. Icons may turn and scale; words never do.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Document page
Copy affordance that confirms in place instead of firing a toast.
Related patterns
- Clipboard Toasts StackRepeat copies push a short stack of confirmations that shuffle down and dim instead of piling up.
- Field Valid CheckA small mark strokes itself in at the right edge of a field the moment its value becomes acceptable.
- Changes Saved PillA pill drifts up from the toolbar to confirm an autosave, then dissolves.