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.
✓
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.
Well done! You successfully read this important alert message.
Oh snap! Change a few things and try submitting again.
Validation failed
Please fix the errors below.
Validation failed
Please fix the errors below.
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
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.
Color 1! Theme color slot 1 alert.
Color 1 Outline! Theme color slot 1 outline alert.
✓ Saved
ⓘ Default size alert with standard padding
!
Large Alert! This is a large alert with increased font size for better prominence.