Alert
UI ComponentsA prominent banner or box that displays important messages, warnings, or notifications that require user attention, typically with an icon indicating severity.
Visual Examples
Example 1
Example 2
Example 3
Visual examples for Alert coming soon.
How It Works in Apps/Websites
Alerts communicate system status, warnings, errors, or success messages. They're typically full-width or contained within a section, with color-coding by severity (red error, yellow warning, green success, blue info). Include an icon, message text, and optional dismiss button or action links.
How AI Interprets This Term
When you say 'alert', AI expects: a rectangular banner with colored background indicating type (red/error, yellow/warning, green/success, blue/info), matching icon on left, message text, and often a close X button on right. Rounded corners, may have border. Full-width or inline.
Prompt Examples
Copy-paste these prompts to use in your AI tools.
Create an error alert saying 'Please fix the errors below'
Design an alert system with 4 types: Error (red bg #fef2f2, red text, X-circle icon), Warning (yellow bg, triangle icon), Success (green bg, checkmark icon), Info (blue bg, info icon). Each has close button, 12px padding, 8px rounded corners.
Show an inline alert (within content flow) vs a sticky alert (fixed at top of page)
Compare With
Related or contrasting terms to help you understand the differences.
Variants & States
Variants
States
Usage Guidelines
When to Use
- •Form validation errors
- •System warnings
- •Success confirmations
- •Important announcements
When NOT to Use
- •Transient messages (use toast)
- •Marketing messages
- •Non-important information
Related Terms
Error State
The visual appearance of an element when an error has occurred, typically shown with red color and an error message explaining what went wrong.
Toast Notification
A small, non-blocking message that appears temporarily to provide feedback about an action, typically sliding in from the corner of the screen and auto-dismissing.