Success State
The visual feedback confirming that an action completed successfully.
Plain English
Success states close the feedback loop — they tell the user "it worked." Without them, users wonder if the form submitted, if the file uploaded, or if the setting saved. The success state should be brief and proportionate — a small form save deserves a brief green checkmark toast; completing an onboarding deserves a more celebratory moment. The key is to provide unambiguous confirmation without being over-the-top about routine actions.
Technical
Common patterns: (1) Toast/snackbar — brief success notification that auto-dismisses after 3–5 seconds. (2) Inline checkmark — replaces the loading spinner in a button. (3) Banner — persistent success message at the top of a form/page. (4) State change — the UI itself changes to reflect the success (e.g. a bookmark icon fills solid). Always use the semantic success colour (green family) with icon + text label. role="status" for success messages (polite) vs role="alert" for errors.
Live Demo
Form Submission Flow
Success feedback must be immediate, positive, and tell the user what happens next.
Usage
✓ Good usage
After form save, show a brief green toast "Settings saved" with a ✓ icon that auto-dismisses after 4 seconds — clear, proportionate, unobtrusive.
✗ Bad usage
A full-page confetti animation for saving a profile name change — out of proportion to the action.
Recommended values
- Toast auto-dismiss: 3–5 seconds
- Success colour: green family (#166534 text, #16A34A border, #F0FDF4 bg)
- Always: icon (✓) + text label, never colour alone
- Button inline success: spinner → checkmark → text change
- Persistent success: use when completion is significant (e.g. payment confirmed)
Common mistakes
- No success feedback at all — users are not sure if the action registered.
- Success messages that look identical to error messages (same styling, just different text).
- Auto-dismissing too quickly (under 2 seconds) — users cannot read the message.
AI Prompt Example
Copy this into Claude, Cursor, Bolt, or v0.
Show a green toast notification (✓ icon + "Saved" text) for routine success actions, auto-dismissing after 4 seconds. For significant completions (payment, onboarding), show a persistent success banner with a clear next action. Use role="status" on success messages.