UI components · Feedback
Alert
Also called: Banner, Callout, Alert bar, Notice
A colored bar that stays in the page or a section, explaining the current status, a risk, or something to watch out for.
Click “Labeled” to see what each part is called, or “Anti-pattern” to see the most common mistake.
How to tell AI
Swap in your own content firstPut a yellow warning alert at the top of the form, with an exclamation icon on the left and the text "Your email isn't verified yet, so some features are unavailable." On the right, add a "Verify now" link and a close button. Once it's closed, don't show it again during this visit. Make the alert the same width as the form, and don't make it a floating popup.
Send to
01Decide
Does your content look like this?
Check both columns to confirm Alert is what you need.
Use Alert when
- You need to keep reminding the user about an unresolved state, like an unverified account or ongoing maintenance
- The form failed to submit, and you need to sum up the reasons above the form
- On a docs or settings page, you need to set a note apart from the main text
Pick something else when
You're just reporting the result of an action that just finished, like "Copied"
A newly arrived message needs attention, but the user may be working elsewhere on the page
The page needs to show many messages, and stacking them makes people ignore all of them
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.
- 01
Stacking three or four alerts at the top of the page, pushing the content below the fold
The wireframe below shows this case. The red dashed box marks the problem.The wireframe on the right shows this case. The red dashed box marks the problem.
- 02
Using the red error style for every alert, so users can't tell what's serious
- 03
Making the alert a floating layer over the content that covers the form below
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 bar with a background color and border, made up of a status icon, a title or description, an optional action link, and a close button.
PartsClick one to highlight it in the wireframe above
04Explained
In detail
An alert is a bar with a background color inside the page, with an icon on the left and a sentence or two on the right, sometimes with a "Fix it" link or a close button. It comes in four levels: success, info, warning, and error, each with its own color and icon. It's part of the page content and doesn't disappear on its own. It usually sits at the top of the page, above a form, or at the start of a section. The "Tip" and "Note" boxes (callouts) you see on docs sites are the same kind of thing.
How it differs from a Toast: a toast floats over the page and disappears in a few seconds, as feedback on the action just taken. An alert is static and describes an ongoing state, like "3 days left in your trial" or "You're offline." How it differs from a Notification: a notification pops in from a corner as a newly arrived message. An alert doesn't pop up; it lives in the page.
Developer infoTerm ID, DOM cues, match priority
- Term ID
component-alert- DOM selectors
The extension matches these CSS selectors when it inspects a page locally (tags, ARIA roles, common component library classes).
[role="alert"].ant-alert.el-alert[class*="MuiAlert-root"].arco-alert.t-alert.n-alert[data-slot="alert"].alert
- Priority
- 1 · when several match at the same level, the higher priority wins
- Version
- v2 · updated Sep 29, 2026