Notification
You might say
Clicking the bell in the top right should show all of someone's system notifications.
Notify the user about an event with a title and detailsA notification carries more information than a toast and suits background jobs, activity from other people, and delayed results. If the message should be available later, also store it in a notification center with a read state.
You can say this to an AI Agent
When a background export finishes, add a notification with the report name, completion time, download action, and clear unread state. Do not rely on a toast on the original page or block the current page. Verify it survives navigation.
When to use it
- Background task completedReview declined View reason →
- A teammate mentioned the userNew comment“This approach looks good to me.”View →
- A delayed job failedExport complete1,024 records exportedDownload file →
- An event that may need later reviewSystem announcementv2.4 is out with dark modeRelease notes →
When NOT to use it
- Use it for every tiny local actionSavedA simple save doesn’t need a notification
- Show it once when the information must remain availableVerify your identity firstVerify now
- Hide the source or time of the event📢 Scheduled maintenance this Saturday, 02:00–04:00. The service will be unavailable.
- Send repeated notifications for the same unchanged stateNew commentExport completeSystem announcement
Anatomy
Review failedThe cover copy ratio is too high, please adjust and resubmit.
×A card that displays messages in the corner of the interface
Differentiate information/success/warning
Conclusion in one sentence, bold
Causes, effects and next steps
Let users turn off notifications on demand
Variants
Basic
New comment
"I think this solution is okay"
There is news worth knowing, but there is no rush to deal with it
With Action
Export completed
1,024 pieces of data have been exported
Download file →When users also need a clear way to continue.
Warning
Insufficient storage space
Less than 500MB remaining, please clean up in time
There are hidden dangers that need attention, such as insufficient space.
Typical use cases
Export completed
Failed review
The copy-to-copy ratio of the cover is too high, please adjust and resubmit.
View reasons →New mention
New comment
Alex Chen: "I think this plan is okay, so I will follow this version."
Reply →Build failed
Export completed
1,024 order data has been packaged.
Download file →Approval request
System announcements
v2.4 released: Added dark mode and global search.
Update log →Recommended tool
Web fine-tuning tool · Selector Pro
Select page elements for precise AI edits
Click a button, text, or card, note the change, then copy its exact location to AI.
Open Selector Pro website↗Quick check