Beginner5 min readShare
Was this chapter helpful?
Share
How to give users feedback — success messages, error alerts, loading indicators, and pop-up notifications.
A small pop-up confirming an action worked. 'Profile saved!' Appears briefly, then disappears on its own.
When to use: Form submitted, item added to cart, settings saved
Tells the user something went wrong. 'Could not save. Please try again.' Should explain what to do next.
When to use: Failed API call, invalid form, network error
Non-urgent information at the top of the page. 'Your trial ends in 3 days.' Stays visible until dismissed.
When to use: Announcements, tips, warnings, promotions
Appears outside the browser — on the user's phone or desktop. Requires explicit permission from the user.
When to use: New message, order shipped, appointment reminder
Auto-dismiss success toasts after 3-5 seconds
Keep error messages visible until the user dismisses them
Position toasts consistently (top-right or bottom-right)
Use color to indicate type: green=success, red=error, blue=info
Don't stack more than 3 toasts at once
Don't use toasts for important actions (use a confirmation dialog instead)
Don't show a toast for every minor interaction
Don't use technical error messages ('500 Internal Server Error')
Beautiful, minimal toasts. One line of code to add. The most popular choice for modern React apps.
Lightweight and customizable. Great defaults out of the box. Easy to style with Tailwind.
Part of the shadcn/ui component library. Consistent with other shadcn components if you're already using them.
Different names mean different things. Use the right word so your AI tool builds exactly what you picture:
A small pop-up that slides in from the corner and disappears after a few seconds.
Use for: Quick confirmations: 'Saved!', 'Copied!', 'Item added to cart.'
A colored banner or box inline on the page — usually red for errors, yellow for warnings, green for success.
Use for: Form errors, validation messages, or anything the user needs to read before continuing.
A full-width strip at the top of the page with a message and optional dismiss button.
Use for: Announcements, maintenance warnings, trial expiration notices, cookie consent.
Similar to a toast but appears at the bottom of the screen. Common in Material Design / Android-style apps.
Use for: Action confirmations with an undo option: 'Email archived. Undo.'
A centered pop-up that blocks the page until the user responds. Has a backdrop overlay.
Use for: Destructive confirmations: 'Are you sure you want to delete this?' or important choices.
An icon (usually a bell) in the header with a red badge count. Opens a dropdown of recent notifications.
Use for: In-app notification center: new messages, mentions, system updates.
Imagine you're building an online store. When a customer adds an item to their cart, a success toast slides in from the bottom-right: 'Added to cart!' When they try to pay but their card is declined, a red error alert appears inline above the payment form: 'Payment failed. Please check your card details and try again.' After they successfully place an order, an info banner appears at the top of the confirmation page: 'Your order is being processed. You'll receive a shipping update by email.'
Build this with AI
"Build an e-commerce notification system using Sonner for toasts. Add: (1) a success toast when an item is added to the cart showing the product name, (2) an inline red error alert above the payment form when payment fails with a retry suggestion, (3) a blue info banner on the order confirmation page about shipping updates that can be dismissed. Position toasts in the bottom-right corner. Use Tailwind CSS for the inline alerts and banners."
A toast is a small, temporary pop-up that appears briefly (usually 3-5 seconds) and then disappears on its own. An alert is a more prominent message that stays on screen until the user dismisses it. Use toasts for confirmations ('Saved!') and alerts for errors or important warnings that need the user's attention.
It's best to limit toasts to 3 visible at a time. If more than 3 stack up, the oldest one should disappear. Most toast libraries like Sonner handle this automatically. Too many toasts at once feel overwhelming and users will start ignoring them.
It depends on the type. Success toasts ('Profile saved!') should auto-dismiss after 3-5 seconds — the user just needs a quick confirmation. Error toasts should stay visible until the user closes them, because the user may need to read the error message and take action. Info toasts can go either way depending on importance.
Add toast notifications
"Add toast notifications to my Next.js app using Sonner. Set up the provider in my layout, then add success toasts after form submissions, error toasts for failed API calls, and an info toast when the user first visits. Position them in the bottom-right corner."
Add inline form feedback
"Add inline feedback to my forms: show a green success message below the form when submitted, red error messages next to each invalid field, and a loading spinner on the submit button while processing. Use Tailwind CSS."
Add a notification bell
"Add a notification bell icon in the header that shows a red badge with the count of unread notifications. When clicked, show a dropdown panel listing recent notifications with timestamps. Mark as read when clicked."
