Contextual feedback messages for typical user actions with flexible alert messages.
Basic Alerts
Primary! This is a primary alert — check it out!
Secondary! This is a secondary alert — check it out!
Success! This is a success alert — your operation completed successfully.
Danger! This is a danger alert — something went wrong!
Warning! This is a warning alert — please review before proceeding.
Info! This is an info alert — here's some useful information.
Light! This is a light alert — subtle but important.
Dark! This is a dark alert — for high contrast messaging.
Alerts with Icons
✓
Success! Your changes have been saved successfully.
⚠
Error! Unable to process your request. Please try again.
!
Warning! Your session will expire in 5 minutes.
ⓘ
Information! New features are now available in your account.
Dismissible Alerts
Well done! You successfully read this important alert message.
Oh snap! Change a few things and try submitting again.
Warning! Better check yourself, you're not looking too good.
Heads up! This alert needs your attention, but it's not super important.
Alerts with Additional Content
Success!
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.
System Update
A new version of the application is available. This update includes:
- Performance improvements
- Bug fixes
- New dashboard features
Outline Alerts
Primary Outline! This is a primary outline alert.
Success Outline! This is a success outline alert.
Danger Outline! This is a danger outline alert.
Warning Outline! This is a warning outline alert.
Info Outline! This is an info outline alert.
Theme Color Alerts
Color 1! Theme color slot 1 alert.
Color 2! Theme color slot 2 alert.
Color 3! Theme color slot 3 alert.
Color 4! Theme color slot 4 alert.
Color 5! Theme color slot 5 alert.
Color 6! Theme color slot 6 alert.
Color 7! Theme color slot 7 alert.
Color 8! Theme color slot 8 alert.
Color 9! Theme color slot 9 alert.
Theme Color Outline Alerts
Color 1 Outline! Theme color slot 1 outline alert.
Color 2 Outline! Theme color slot 2 outline alert.
Color 3 Outline! Theme color slot 3 outline alert.
Color 4 Outline! Theme color slot 4 outline alert.
Color 5 Outline! Theme color slot 5 outline alert.
Color 6 Outline! Theme color slot 6 outline alert.
Color 7 Outline! Theme color slot 7 outline alert.
Color 8 Outline! Theme color slot 8 outline alert.
Color 9 Outline! Theme color slot 9 outline alert.
Compact Alerts in Grid
✓
Saved
!
Pending
×
Failed