Alert

Alerts are used to notify the user of an important event or action. It can prompt users to take a specific action and can also be dismissed.

Alerts without action

Alerts can be created using the alert class. There are 6 variants available for alerts. The variants include: success, danger, warning, info, secondary, themed, outlined.You can specify minimum and maximum width of the alerts as per your use-case.

Payment successful!
Payment failed! Please try later.
This is a warning!
This is an info!
This is a themed alert!
This is a secondary alert!

Alerts with close button

Alerts can be dismissed by clicking on the close button. Just add class component-close to activate this functionality. Note that dismiss button or icon should have class icon-close. Refer to the code for more clarity.

This is a success alert!

Outlined Alerts

You can use outlined variants by adding alert-outlined class to existing classes.

This is an outlined themed alert!
This is an outlined alert!