What is Success Message?

Success Messages confirm that an action completed successfully. Provides closure and positive reinforcement. Can be toast (temporary), banner (persistent), or inline (near action). Use green color and checkmark icon. Keep brief and specific: "Invoice sent" not "Action completed successfully."

When Should You Use This?

Use success messages for completed actions: form submissions, payments, saves, sends, deletions, imports. Be specific about what succeeded: "3 users invited" not "Success!". Provide next action when relevant: "Invoice sent" + "View invoice" link. Use toast for quick confirmations, banner for important milestones, inline for form success.

Common Mistakes to Avoid

• •Generic message—"Success!" is vague; say what succeeded: "Password updated"
• •Blocking users—don't require dismissing success message to continue; auto-dismiss
• •No next action—after signup, guide to next step; after payment, show receipt
• •Overusing—not every action needs confirmation; obvious successes (like typing) don't need success message
• •Wrong placement—success message should be near the action (form success above form, not in header)

Real-World Examples

• •Stripe—"Payment successful" with receipt link and "Send another payment" action
• •Linear—"Issue created" toast with issue link and undo button
• •GitHub—"Changes committed" banner with commit hash and view link
• •Notion—"Page shared" toast with "Copy link" button