- Components
- Alerts
Components
Tailwind CSS Alerts
Use Tailwind CSS alerts of various colors and border style to provide contextual feedback massages. Browse alerts with lists, added links or action buttons.
Alerts are essential components for highlighting important information on web pages. They effectively capture user attention for notifications, warnings, or updates.
Customizable in text length and style, alerts can include optional close buttons, ensuring a seamless user experience. By integrating alerts, you ensure that key information is prominently displayed, improving user engagement and overall site functionality
Solid color variants
These solid colors are ideal for creating a cohesive and polished appearance in any application.
Soft color variants
These gentle, muted tones create a subtle yet effective way to draw attention without overwhelming the user.
Bordered styles New
Use a discovery message to signify an update to the UI or provide information around new features and onboarding.
Successfully updated.
You have successfully updated your email preferences.
Error!
Your purchase has been declined.
With description
Alerts can also contain additional HTML elements like headings, paragraphs and icons.
Cannot connect to the database
With list
Similarly you can use lists.
A problem has been occurred while submitting your data.
- This username is already in use
- Email field can't be empty
- Please enter a valid phone number
Actions
More actionable alert example.
YouTube would like you to send notifications
Link on right
Use utility classes to quickly provide matching colored links within any alert.
A new software update is available. See what's new in version 3.0.7
Discovery
Use a discovery message to signify an update to the UI or provide information around new features and onboarding.
New version published
Chris Lynch published a new version of this page. Refresh to see the changes.
Dismiss button
Requires JS
Note that this component requires the use of our Remove Element plugin, else you can skip this message if you are already using Preline UI as a package.
Use dismiss-alert to dismiss a content.
