Default Alert
This is a primary alert—something important you should know!
This is a secondary alert—some additional context.
Success! Your operation was completed successfully.
Error! Something went wrong—please try again.
Warning! Please double-check your inputs.
Info: Here's something you might find useful.
Light alert—just a subtle notification.
Dark alert—use for general-purpose messages.
Dismissing Alert with Solid Colors
Heads up! This is a primary alert with important information.
Notice: This is a secondary alert with supporting details.
Success! Your action was completed successfully.
Error! Something went wrong—please try again later.
Warning! Please review your input before proceeding.
Info: Here’s something you might find helpful.
Note: This is a light alert with a subtle message.
Notice: This dark alert is great for general messages.
Link Color
Need more info? Check out
this primary link
for important details.
Here's a secondary message with
a helpful link
for additional context.
Operation successful! View the results
by clicking here.
Something went wrong. Learn more
through this alert link.
Here’s some information that may help—click
this link
to read more.
Just a light reminder with
a gentle link
to explore.
This is a general dark alert. Find out more
by clicking here.
Additional Content
Great job!
You’ve successfully read this important alert message. The text is intentionally a bit longer to demonstrate how spacing behaves in this kind of layout.
Use margin utilities to keep your content clean and organized.
Heads up!
This alert message gives additional information with a longer message to show content spacing within an alert.
Apply spacing classes wisely to maintain structure and clarity.
Notice!
You’ve just read through a primary alert message. The extra length helps show how well the layout handles content spacing.
Custom Alerts
A dark alert with a bottom border!
A success alert with a dashed border!
A danger alert with a thick border!
A warning alert with a custom close button!
An info alert with a custom icon!
Notice!
You’ve just read through a primary alert message. The extra length helps show how well the layout handles content spacing.
Dismiss Alerts
A primary alert with a Dismiss Alerts!