Button-to-success state

Make it fit your project.

Keep the button width fixed through idle, pending, success, and failure states. After the operation succeeds, draw an SVG check with stroke-dashoffset over 180ms and update the label. Re-enable a clear retry action on failure and announce the status once.

Build and check.

1. Confirm the supplied content, target environment, and required assets before implementing.
2. Keep the button width fixed through idle, pending, success, and failure states. After the operation succeeds, draw an SVG check with stroke-dashoffset over 180ms and update the label. Re-enable a clear retry action on failure and announce the status once.
3. Implement idle, active, keyboard, touch, reduced-motion, and failure states as relevant.
4. Inspect the opening, midpoint, and final state at desktop and mobile sizes; report any dependency or output limitation.

Know the limits.

• Only show success after the actual action succeeds; preserve useful error details.
• The prompt guides a coding agent; output quality depends on its implementation and review.

Want us to build it?

Send an optional project brief. We’ll receive your contact details, project description, and this recipe’s ID.