Alert
You might say
Keep a yellow warning at the top of the page to let people know their account is about to expire.
Keep an important message or warning visible on the pageAn alert sits near the related content and explains a status, risk, or problem without blocking the whole page. Use a heading, icon, and clear wording together to show importance; color alone is not enough.
You can say this to an AI Agent
Add a persistent expiry alert near account settings with remaining days, impact, and a renewal action without blocking editing. Do not rely on yellow alone. Verify readability, the renewal action, and the product's intended dismissal behavior.
When to use it
- Form-wide validation summary⚠ 2 fields need attention. Check them and try again.EmailPassword
- Service status message📢 Scheduled maintenance this Saturday, 02:00–04:00. The service will be unavailable.
- Important rule or warning⚠ This can’t be undone. Make sure you have a backup before deleting.Delete project
- A problem that remains relevant while the user worksⓘ This is an unpublished draft, visible only to you
When NOT to use it
- Interrupt a small successful action✓ Saved successfullyA one-line success message doesn’t need to stay on screen
- Show a vague warning with no next step⚠ Deletion needs an explicit confirmationDelete
- Use red for every informational message⚠ Your password will expire soon⚠ You have 3 unread announcementsⓘ A new feature is now available
- Remove an important alert before the problem is resolved🎉 50% off for a limited time! Upgrade now.
Anatomy
Demo environment · Data resets every day at midnight, do not store important content×
The entire banner, the type determines the background color and border
Assist in distinguishing prompt, warning and error types
Add a title and description to explain clearly what happened and what to do
Optional, only allowed to turn off the prompt
Variants
Info
New feature available · Dark mode is now supported
Use an informational alert for useful, non-urgent updates.
Success
Published · Your changes are now live
Use a persistent success alert when the result needs to remain visible.
Warning
Demo environment · Data resets every day at midnight
There are risks but nothing wrong yet. Warn users in advance.
Error
Couldn’t submit · Please check and try again
An error has occurred and the cause and solution need to be clearly demonstrated.
Typical use cases
Payment warning
Couldn’t submit · 2 incorrect entries, please check and try again
System status
System maintenance · The service will be suspended from 02:00-04:00 this Saturday, please save your work in advance×
Form error summary
Danger zone
Delete item · This cannot be undone. Make sure you have a backup before deleting it.
Account notice
Unpublished draft · The current content is only visible to you and will be made public after publishing×
Summer activity plan (draft)
Recommended tool
Web fine-tuning tool · Selector Pro
Select page elements for precise AI edits
Click a button, text, or card, note the change, then copy its exact location to AI.
Open Selector Pro website↗Further reading
Quick check