Alert

Alerts are used to communicate important information by attracting user's attention without interrupting the user's flow. In order to only use the Alert Component from Blaze UI in your project, copy and paste the below code in the head tag of your html document. 

                            
                <link rel="stylesheet" href="https://blaze-ui.netlify.app/css/foundation.css" />
                <link rel="stylesheet" href="https://blaze-ui.netlify.app/components/alert/alert.css" />

Simple Alert

To use this alert you just need to add class name alert followed by varient name: alert-success, alert-warning, alert-info, alert-error (eg. class="alert alert-success"). You can copy the html part from below code snippet.

Success! Profile has been updated successfully.
Warning! Low disk storage, clear some space.
Update! An update is available to install.
Error! We encountered an error while processing your request. 
                        
                            <div class="alert alert-success">
                                Success! Profile has been updated successfully.
                            </div>
                            <div class="alert alert-warning">
                                Warning! Low disk storage, clear some space.
                            </div>
                            <div class="alert alert-info">
                                Update! An update is available to install.
                            </div>
                            <div class="alert alert-error">
                                Error! We encountered an error while processing your request.
                            </div>

Icon Alert

To use the alert with an icon you just need to add class name alert-icon along with the alert class, followed by varient name: alert-success, alert-warning, alert-info, alert-error (eg. class="alert alert-icon alert-success").

If you want to use the same icon as below, you will need to add this highlighted link to the head tag of your html document: @import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css'); (Credits: font-awesome). Alternatively, you can use any other icons of your choice also.

You can copy the html part from below code snippet.

Profile has been updated successfully!
Low disk storage, clear some space!
An update is available to install!
We encountered an error while processing your request! 
                        
                            <div class="alert alert-icon alert-success">
                                <i class="fas fa-check-circle"></i> Profile has been updated successfully!
                            </div>
                            <div class="alert alert-icon alert-warning">
                                <i class="fas fa-exclamation-circle"></i> Low disk storage, clear some space!
                            </div>
                            <div class="alert alert-icon alert-info">
                                <i class="fas fa-question-circle"></i> An update is available to install!
                            </div>
                            <div class="alert alert-icon alert-error">
                                <i class="fas fa-times-circle"></i> We encountered an error while processing your request!
                            </div>