JAlert
A flexible alert component for displaying important messages, notifications, and status updates to users.Basic Usage
Alert Variants
With Icons
Dismissible Alerts
Complete Examples
Form Validation Feedback
System Notifications Panel
Inline Alert in Card
API Reference
Constructors
Creates an alert with only a title
Creates an alert with title and description
Methods
Sets a custom icon node (like SVGPath)
Sets an icon using the JIcon enum
Enables or disables the close button. When dismissed, the alert hides itself (setVisible(false) and setManaged(false)).
Adds custom CSS style classes to the alert
CSS Style Classes
Alerts use the following CSS classes:alert- Base alert containeralert-success- Success/positive variant (green)alert-danger- Error/danger variant (red)alert-warning- Warning variant (yellow)alert-info- Info variant (blue)alert-icon-container- Icon wrapperalert-icon- Icon elementalert-title- Title textalert-description- Description textalert-dismiss-container- Close button containeralert-dismiss-btn- Close buttonalert-close-icon- Close icon (X)
Alert Types Guide
Success
Use for successful operations, confirmations, and positive feedback.Examples: Form submitted, file uploaded, settings saved
Error
Use for errors, failed operations, and critical issues.Examples: Invalid input, server error, operation failed
Warning
Use for warnings, cautions, and important notices.Examples: Unsaved changes, destructive action, expiring soon
Info
Use for informational messages and helpful tips.Examples: New features, tips, general notifications
Best Practices
Keep Messages Concise
Keep Messages Concise
Alert titles should be brief (5-10 words). Use the description for additional details if needed.
Use Appropriate Icons
Use Appropriate Icons
Always pair alerts with relevant icons to improve scannability and accessibility.
Make Important Alerts Dismissible
Make Important Alerts Dismissible
Allow users to dismiss informational alerts, but consider keeping critical errors visible until resolved.
Position Strategically
Position Strategically
Place alerts near the content they relate to. For global messages, position at the top of the interface.
Don't Overuse
Don't Overuse
Too many alerts can overwhelm users. Use them sparingly for truly important information.
Accessibility
- Alerts use semantic colors that work in both light and dark themes
- Icons provide visual reinforcement of the message type
- Text wrapping ensures descriptions remain readable
- Dismissible alerts provide clear close buttons
- High contrast between text and background for readability