Alert
警告提示
Aliases:警告条提示横幅警告框通知横幅错误提示条页面顶部提示表单提交后的错误提示
What is it
An inline, status-coloured banner inside the page flow for messages that must be seen: errors, warnings, important notices. It takes layout space instead of overlaying, and stays until the issue is resolved or the user dismisses it.
Name disambiguation
An alert is persistent in-page status messaging. A toast is a brief floating confirmation. A modal is a blocking overlay that demands action.
Interactive playground
Try it. Make an informed choice.Compare information, success, warning and error messages; try dismissing a dismissible alert.
Loading lab…
What to look for
- 01Communicate importance with text as well as color.
- 02Blocking errors should explain how to recover.
✓ When to use
- A form-level error summary after submit
- System notices (maintenance, quota nearly full)
- An in-page warning before a destructive action
✕ When not to use
- Lightweight success feedback — use a toast
- Field-specific issues — use inline field errors
- Overuse dilutes attention — keep alerts rare
Variants
Info
信息
Neutral tone, general notice
Success
成功
Confirms a completed operation
Warning
警告
Risky but continuable
Error
错误
Failed or dangerous, needs handling
Implementation
background-colorborderborder-radiusflexMap status colours: info/success/warning/error each get a low-saturation surface, a matching icon and a left accent border. Structure: icon, title, description, optional actions and close. Place it above or near the offending content rather than always stacking at the top. Never rely on colour alone — pair it with icons and text.
Platform API
role="alert"aria-live="assertive"In code
The exact names this thing goes by in each ecosystem — use the row that matches your project.
Compare
Full comparison →| Alert警告提示 | Toast轻提示 | Form Validation表单校验 | |
|---|---|---|---|
| Interruption | Medium — visible in the flow, not blocking | Low — brief and non-blocking | Low — inline errors, typing flow preserved |
| Persistence | High — persists until resolved or dismissed | Low — auto-dismisses in seconds | High — error persists beside the field until fixed |
| Error pinpointing | Medium — explains cause and scope | Poor — no field-level context | Pinpoints the exact field and reason |
Related concepts
A small message bar that appears in a viewport corner and dismisses itself, reporting an operation result (saved, copied, upload done). Non-blocking, usually with one action (undo, view), lingering for about 3–5 seconds before fading out.
ComponentsAlternativeChecks input validity during typing or at submit and surfaces errors right next to the offending field. The goal is to tell users, with minimal interruption and maximum locality, what went wrong and how to fix it — instead of bouncing them back with a page of errors after submit.
PatternsAlternativeA dialog rendered above the page with a translucent backdrop that interrupts the current flow and demands a task or decision first. The backdrop blocks interaction with the underlying page and focus is temporarily trapped inside — the most disruptive of the overlay containers.
ComponentsSimilar