Alerts

Alerts help a user understand the current status of action without interrupting the user's flow. There are 5 variants available - success alert, warning alert, danger alert, primary alert with a link, and secondary alert with a link.

Simple Alerts

These are alerts without any icons, they only hold the text.
Use the class alerts along with the variant class as preferred - success-alert, warning-alert, danger-alert, primary-alert-link or secondary-alert-link.

Here are some simple alerts:
This is a simple success alert!
This is a simple warning alert!
This is a simple danger alert!
A simple primary alert with an example link. Give it a click if you like.
A simple secondary alert with an example link. Give it a click if you like. 




    This is a simple success alert!

Alerts with Icons

These are alerts with message icons and a dismiss button. Use the class icon-alerts along with the classes alerts and the preferred variant.
These alerts have two child containers - one for the icon and alert message, and the other for the dismiss button.
Use class icon-text in the first child and close-btn in the second child.

Here are some alerts with icons:
check_circle This is a success alert!
error_outline This is a warning alert!
report_problem This is a simple danger alert!
A primary alert with an example link
A secondary alert with an example link 





    

        
            error_outline
        
        This is a warning alert!
< Installation Avatars >