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.
Failed review
The copying ratio of the cover is too high, please adjust and resubmit.
View reasons →
×

When to use it

  • Background task completed
    Review declined View reason →
  • A teammate mentioned the user
    New comment“This approach looks good to me.”View →
  • A delayed job failed
    Export complete1,024 records exportedDownload file →
  • An event that may need later review
    System announcementv2.4 is out with dark modeRelease notes →

When NOT to use it

  • Use it for every tiny local action
    SavedA simple save doesn’t need a notification
  • Show it once when the information must remain available
    Verify your identity first
    Verify 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 state
    New comment
    Export complete
    System 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 →
×