Skip to main content
Frontend Glossary

UI components · Feedback

Notification

Also called: Notice, In-app notification, Notification card

A message card that pops in from a corner of the screen (usually the top right), with a title and body text, to announce new messages or background task results.

Click “Labeled” to see what each part is called.

How to tell AI

Swap in your own content first

When a background export finishes, pop a notification into the top-right corner of the page, 360px wide, with a check icon on the left, the title "Export complete," and the text "Your order data is ready: 1,280 rows." Below that, add a "Download" button. It can be closed from its top-right corner and disappears after 8 seconds; hovering over it pauses the timer.

Send to

01Decide

Does your content look like this?

Check both columns to confirm Notification is what you need.

Use Notification when

  • A background task finished or failed while the user may be doing something else
  • The system is pushing a new message, like a new approval, a new comment, or a mention
  • The message needs a title plus a sentence or two; one sentence can't cover it

Pick something else when

  • You're just reporting the result of what the user just clicked; a toast is enough

    Use insteadToast

  • Messages need to be kept and looked at later; they belong in a notification center list

  • Something the user must confirm before continuing

    Use insteadModal

Not sure? Upload a screenshot and page analysis will check which layout each block should use.

02Pitfalls

Common misuse

It looks like it works, but it makes things harder for users.

  1. 01

    Every button click pops a notification into the top right that just says "Success"

  2. 02

    Notifications never close on their own and have no close button, filling up the whole right side

  3. 03

    A notification pops up right on top of the user menu or a key button in the top nav

03Spot it

How to spot it

Look at the overall structure first, then check a few features you can spot at a glance.

Structure

A small floating card made up of a status icon, a title, body text, an optional action button, and a close button in the top-right corner. Multiple cards stack vertically.

PartsClick one to highlight it in the wireframe above

04Explained

In detail

A notification is a small card that slides in from the top-right corner (sometimes the bottom right). It has an icon, a title, a line or two of text, and a close button in its top-right corner, sometimes with an action button like "View." It can close itself after a few seconds or stay until the user closes it. Typical cases: an export finished, a new approval request came in, or someone mentioned you in a comment.

How it differs from a Toast comes down to how much it says and where it comes from. A toast is one sentence reacting to what the user just did. A notification has a title and body text, and is often pushed by the system, unrelated to what the user is doing right now. How it differs from an Alert: an alert is fixed in the page and describes an ongoing state, while a notification is a temporary card floating above the page.

A notification isn't a notification center. Messages that need to be kept and looked at later belong in a separate notification list with a badge.

Developer info
Term ID
component-notification
DOM selectors

The extension matches these CSS selectors when it inspects a page locally (tags, ARIA roles, common component library classes).

  • .ant-notification-notice
  • .el-notification
  • .arco-notification
  • .t-notification
  • .n-notification
  • .toast:has(.toast-header)
Priority
2 · when several match at the same level, the higher priority wins
Version
v2 · updated Sep 29, 2026