Alerts
Alerts with Icons
Primary Alert! This is a primary alert with icon.
Success Alert! This is a success alert with icon.
Warning Alert! This is a warning alert with icon.
Danger Alert! This is a danger alert with icon.
Alert with Additional Content
Well done!
Aww yeah, 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.
Basic Alerts
Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.
Primary Alert! A simple primary alert—check it out!
Secondary Alert! A simple secondary alert—check it out!
Success Alert! A simple success alert—check it out!
Danger Alert! A simple danger alert—check it out!
Warning Alert! A simple warning alert—check it out!
Info Alert! A simple info alert—check it out!
Dark Alert! A simple dark alert—check it out!
Dismissible Alerts
Primary Alert! You can dismiss this alert by clicking the close button.
Success Alert! You can dismiss this alert by clicking the close button.
Warning Alert! You can dismiss this alert by clicking the close button.
Danger Alert! You can dismiss this alert by clicking the close button.
Solid Color Alerts
Primary Alert! This is a solid color primary alert.
Success Alert! This is a solid color success alert.
Warning Alert! This is a solid color warning alert.
Danger Alert! This is a solid color danger alert.