Alert
警示框
A message that has to be taken seriously: something broke, something is at risk, and you need to act on it.
Live Demo
Actually clickableEmail already registered
Use a different address, or sign in to your existing account.
Your cloud backup is full. Clear some space to keep backing up.
What you just saw:The red line reading "Wrong password" under a failed form field, the yellow banner reading "Your card has expired" at the top of a checkout page — both are alerts.
What it actually is
An alert is the "you cannot ignore this" category. It can sit inline in the page or live inside a dialog (an alert dialog). What they share is that the user is normally expected to respond. Unlike a toast it does not disappear on its own.
Anatomy · What it's made of
Container容器
Tinted background + a matching left border
Icon图标
Chosen by severity: i / ! / ×
Title标题
One sentence naming the problem
Description说明
Optional, how to fix it
Action操作
Such as "Retry" or "Go to settings"
When to Use
When it fits, and when it doesn't| Situation | Use it? |
|---|---|
| The user must act before anything can continue (an error, a risk) | Yes |
| The blast radius is large (a whole account, a network outage) | Yes |
| The information has to stay on screen and cannot auto-dismiss | Yes |
| Reporting the success of a small action | No |
| You only want to offer a tip on how to use something | Depends |
Red means "something is wrong". If you render an ordinary tip in red, users stay anxious about the entire interface.
Three alerts on one page and users will ignore every single one of them.
Similar Patterns
Don't mix these upAlertCurrent
警示框
A message that has to be taken seriously: something broke, something is at risk, and you need to act on it.
Banner
横幅提示
A full-width strip pinned to the top or bottom of the page that carries a message about the whole app.
In one line:A message that has to be taken seriously: something broke, something is at risk, and you need to act on it.
Banner
横幅提示
A full-width strip pinned to the top or bottom of the page that carries a message about the whole app.
Toast
轻提示
A small confirmation that drifts into the corner of the screen after an action and disappears on its own a few seconds later.
Modal
模态框 / 对话框
Something pops up in the middle of the screen, and until you deal with it you cannot use the page underneath.
Error State
错误状态
Something actually broke — not "no data", genuinely broken — and the user has to be told what to do about it.
How to tell AI
Three levels of promptAdd the component name and specifics
Add a red alert at the top of the form: "This email is already registered", a supporting line "Use a different email, or sign in to your existing account", and a "Sign in" button. It disappears automatically once the user corrects the field.
Don't just say this to AI
Bad → BetterDon't say this to AI
Pop up a warning when something goes wrong.
Say this instead
Add a role="alert" alert at the top of the form: light red background + 3px left border + ! icon + the title "This email is already registered" + a suggested fix + a "Sign in" button, focused on submit failure and removed automatically once the input is corrected.
Share this card
Social-readyTurn this pattern into a 3:4 or 1:1 knowledge card and export it as PNG right in the browser. No backend needed.