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.

ⓘNew feature available · The editor now supports dark mode×

✓Published · Your changes are now live×

⚠Demo environment · Data resets every day at midnight×

✕Couldn’t submit · 2 entries are incorrect, please check and try again×

When to use it

Form-wide validation summary
Service status message
Important rule or warning
A problem that remains relevant while the user works

When NOT to use it

Interrupt a small successful action
Show a vague warning with no next step
Use red for every informational message
Remove an important alert before the problem is resolved

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)