Success State
States & VariantsThe visual appearance of an element or notification when an action has completed successfully, typically shown with green color and a checkmark icon.
Visual Examples
Example 1
Example 2
Example 3
Visual examples for Success State coming soon.
How It Works in Apps/Websites
Success states confirm that an action completed as expected. They use green coloring, checkmark icons, and positive messaging. Can appear as: green border on validated inputs, success toast notifications, success pages after form submission, or green badges. Should be clearly positive but not overly celebratory.
How AI Interprets This Term
When you say 'success state', AI expects: green color indication - green border on input (#22c55e), green checkmark icon, green text for success message. Toast notifications with green background or left border. Positive, confirming language.
Prompt Examples
Copy-paste these prompts to use in your AI tools.
Show an input field in success state with checkmark
Design success states: input with green border (#22c55e), green checkmark inside input (right), optional 'Looks good!' text below. Success toast: green left border, checkmark icon, 'Changes saved successfully' message, auto-dismiss after 4 seconds.
Show a form submission flow: loading state (submitting) -> success state (green checkmark, confirmation message)
Compare With
Related or contrasting terms to help you understand the differences.
Variants & States
Variants
States
Usage Guidelines
When to Use
- •Successful form submission
- •Valid input confirmation
- •Completed operations
- •Saved changes
When NOT to Use
- •Ongoing processes
- •Neutral confirmations
- •When success is obvious from context
Related Terms
Error State
The visual appearance of an element when an error has occurred, typically shown with red color and an error message explaining what went wrong.
Toast Notification
A small, non-blocking message that appears temporarily to provide feedback about an action, typically sliding in from the corner of the screen and auto-dismissing.