- Components
- Toasts
Components
Tailwind CSS Toasts
Push notifications to your visitors with a toast, a lightweight and easily customizable alert message.
Example
A basic form of the toasts.
This is a normal message.
This is a success message.
This is an error message.
This is a warning message.
Solid color variants
The default form of solid color toasts.
Soft color variants
The default form of soft color toasts.
Message with loading indicator
Display a global loading indicator, which is dismissed by itself asynchronously.
Action in progress
With actions
Add additional controls and components to toasts.
App notifications
Stack
Vertically stacking multiple toasts in a readable manner.
App notifications
Your app preferences has been successfully updated.
Avatar New
You can also add additional elements, such as an avatar image.
James mentioned you in a comment
Progress New
You can also add additional elements, such as an icon and a progress bar.
Uploading 3 files
Placement
Display a notification message at any place of the viewport.
Top left
Top center
Top right
Center
Bottom left
Bottom center
Bottom right
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.
