# Alert **Path:** Components/Feedback [Back to Documentation Index](http://rubicblazor.skyconis.com/docs.md) --- Alert RbAlert is a versatile feedback component for displaying important messages, notifications, and status updates. It supports multiple variants (Normal, Filled, Outlined), customizable icons, colors, and interactive features like click events and dismissal. Perfect for showing informational messages, warnings, errors, and success notifications without interrupting user workflow. Basic Usage Simple alert usage with different message types and variants. Show code Semantic Alerts Information: This is an informational message to keep you updated. Success: Your operation completed successfully! Warning: Please review this important notice before proceeding. Error: An error occurred while processing your request. Multi-line Content Important Update The system will undergo scheduled maintenance tonight from 10 PM to 2 AM. During this time, some features may be temporarily unavailable. We apologize for any inconvenience. Action Required Your account security settings need to be updated: Enable two-factor authentication Update your recovery email Review recent login activity Colors & Variants Available color options across Normal, Filled, and Outlined variants. Show code Semantic Colors Comparison Normal Primary Secondary Success Danger Warning Info Filled Primary Secondary Success Danger Warning Info Outlined Primary Secondary Success Danger Warning Info Variant & Color Usage Guide When to use each variant: Normal: Subtle alerts that don't demand immediate attention Filled: Important messages that need to stand out prominently Outlined: Less intrusive alerts that maintain visual hierarchy Primary: General-purpose and emphasized messages Secondary: Neutral and supporting messages Success: Positive confirmations and successful operations Warning: Cautionary messages requiring user attention Danger/Error: Critical errors and destructive actions Info: Helpful tips and additional information Dismissible Alerts Alerts that can be dismissed by users with close buttons. Show code Dismissible Alerts Click the close button to dismiss This alert can be dismissed. Click the X button to close it. Successfully saved! Your changes have been saved. Warning: This action cannot be undone. Error: Failed to process your request. Reset All Alerts Dismissible with Custom Actions Cookie Notice: We use cookies to improve your experience. Dismissed 0 times Multiple Dismissible Alerts Info: New features are now available Success: Operation completed successfully Warning: Your session will expire soon Add Info Add Success Add Warning Add Error Auto-Dismiss Simulation Show Auto-Dismiss Alert (5s) Rounded Alerts Alerts with rounded corners for softer appearance. Show code Rounded vs Standard Standard (Default) Standard alert with default corners Rounded Rounded alert with softer, more circular corners Rounded with Different Variants Normal Variant: Rounded alert with subtle background Filled Variant: Rounded alert with solid background Outlined Variant: Rounded alert with border only Rounded with Different Colors Info: Rounded information alert Success: Rounded success alert Warning: Rounded warning alert Error: Rounded error alert Rounded with Close Button Rounded alert with dismissible close button Rounded normal variant with close button Rounded outlined variant with close button Rounded Usage When to use rounded alerts: For a softer, more friendly appearance When matching a design system with rounded corners In modern, minimalist interfaces Particularly effective with chip mode (small, compact alerts) Works well with filled variants for a polished look Chip Mode Using alerts as compact chips for tags and labels. Show code Basic Chip Mode Alerts can be used as compact chips Tag 1 Tag 2 Tag 3 Tag 4 Tag 5 Dismissible Chips Chips with close buttons for filtering or tagging JavaScript C# Python Blazor React Interactive Chip Manager Add Chip Chip-1 Chip-2 Chip-3 Chip Variants Normal Variant Normal Normal Normal Filled Variant (Recommended) Filled Filled Filled Outlined Variant Outlined Outlined Outlined Chip Use Cases Category Tags Technology Design Business Status Labels Active Pending Inactive Filter Tags Featured New Popular Chip Mode Guidelines Best practices for chip mode: Use Rounded="true" for pill-shaped chips Use NoIcon="true" to hide default icons Use Variant="RbVariant.Filled" for prominent chips Add OnCloseClick handler for dismissible chips Perfect for tags, filters, categories, and labels Real-World Examples Practical use cases including form validation, notifications, and status messages. Show code Form Validation Messages Email Password Submit System Notifications Update Available: A new version of the application is ready to install. Storage Warning: You are using 85% of your storage space. Consider upgrading your plan. Backup Completed: Your data has been successfully backed up to the cloud. Connection Lost: Unable to connect to the server. Please check your internet connection. File Upload Status Upload File Payment & Transaction Alerts Payment Successful! Your order #12345 has been confirmed. Receipt sent to your email. Payment Method Expiring: Your credit card ending in 4242 will expire next month. Payment Failed: Your card was declined. Please update your payment method. Payment Pending: Your payment is being processed. This may take up to 24 hours. User Account Alerts Security Alert: New login from Windows Desktop in New York, USA. Review Activity Email Verification: Please verify your email address to access all features. Resend Email Profile Complete: Your profile is 100% complete! You're all set. Cookie & Privacy Consent Cookie Notice: We use cookies to improve your experience and analyze site traffic. Accept Decline Feature Announcements New Feature: Dark mode is now available! Toggle it in settings. Try Now Limited Time Offer: Get 50% off on annual plans. Offer ends in 3 days! System Maintenance Scheduled Maintenance: System will be down for maintenance on Sunday, 2 AM - 4 AM UTC. Performance Update: We've optimized our servers for faster load times! States Readonly and disabled states for alerts. Show code Alert States Comparison Normal: Standard interactive alert Readonly: Alert with disabled interactions Disabled: Alert with reduced opacity and disabled interactions Readonly Alerts (Non-Clickable) Readonly alerts cannot be clicked or closed Readonly alert with OnClick handler (won't fire) Readonly alert with close button (won't work) Readonly alert appears normal but interactions are disabled Disabled Alerts Disabled alerts have reduced opacity Disabled alert with OnClick handler (won't fire) Disabled alert with close button (won't work) Disabled alert with visual indication through opacity Interactive vs Non-Interactive Click the alerts to see the difference Clickable (Normal): Click me to see toast notification Non-Clickable (Readonly): Click won't work Non-Clickable (Disabled): Click won't work + opacity Click count: 0 Dismissible States Normal dismissible alert - click X to close Readonly alert with close button (won't dismiss) Disabled alert with close button (won't dismiss) State Differences State Behaviors: Normal: Alert is fully interactive, OnClick and OnCloseClick events fire when triggered Readonly: Alert appears normal but all interactions (OnClick, OnCloseClick) are disabled Disabled: Alert appears with reduced opacity and all interactions are disabled Both Readonly and Disabled prevent alert interaction while keeping the alert visible Use Readonly when you want to temporarily disable interaction without visual change Use Disabled when you want to visually indicate the alert is not interactive RTL Support Demonstrate alert usage inside an RTL container. Show code معلومة: تم تحديث حالة الطلب بنجاح. تنبيه: يرجى مراجعة البيانات قبل المتابعة. خطأ: تعذر إتمام العملية في الوقت الحالي. ✕ Contents