- Components
- Alerts
Components
Tailwind CSS Alerts
Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.
Solid color variants
The default form of solid color avatars.
Soft color variants
The default form of soft color avatars.
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.
