Loading resource
Loading & motion
A stable button that moves through pending, success, and error in place.
Use for actions after interaction. Pass the real operation status and specific labels such as Saving and Saved. Use successIcon for an optional completion glyph, including a double check on icon actions. Feedback icons inherit the button foreground in every variant; keep error details and retry guidance close to the action. The preview shows primary and outline states with local operations.
src/components/ui/pending-button.tsx
The same feedback, sized for a compact control.
Feedback icons inherit the button foreground so every state stays readable in both themes. Error details stay beside the action.
The preview imports your production components. Open Code for the complete working example, including its imports.
Use Tab to inspect keyboard focus, switch themes, and try the controls. Reset restores the example’s initial state.