- 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
Use a discovery message to signify an update to the UI or provide information around new features and onboarding.
With description
Alerts can also contain additional HTML elements like headings, paragraphs and icons.
Link on right
Use utility classes to quickly provide matching colored links within any alert.
Discovery
Use a discovery message to signify an update to the UI or provide information around new features and onboarding.
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.
