Alert Components
Contextual feedback messages for typical user actions
Basic Alerts
Primary Alert! This is a primary alert with an example link. Give it a click if you like.
Secondary Alert! This is a secondary alert with an example link. Give it a click if you like.
Success Alert! This is a success alert with an example link. Give it a click if you like.
Danger Alert! This is a danger alert with an example link. Give it a click if you like.
Warning Alert! This is a warning alert with an example link. Give it a click if you like.
Info Alert! This is an info alert with an example link. Give it a click if you like.
Light Alert! This is a light alert with an example link. Give it a click if you like.
Dark Alert! This is a dark alert with an example link. Give it a click if you like.
Alerts with Icons
Success! Your changes have been saved successfully.
Error! There was a problem processing your request.
Warning! Please review your input before continuing.
Info! New updates are available for your system.
Dismissible Alerts
Success! You can dismiss this alert.
Danger! Something went wrong.
Warning! Please be careful.
Info! Here's some information.
Alerts with Additional Content
Well done!
You successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.
Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
System Update
A new version of the system is available. Please review the changes before updating:
- Bug fixes and performance improvements
- New dashboard features
- Enhanced security measures
Custom Styled Alerts
Primary! This alert has a colored left border.
Success! Operation completed successfully.
Danger! This is an outlined alert style.
Gradient Alert! This alert has a gradient background.
Live Alert Example
Toast Notifications
Notification
Just now
Hello! This is a toast message.