Toasts
1. Default toast
Copy
Use this simple toast component with an icon, message, and dismissible close button to show alert messages to your website visitors. Make sure that you set the correct id for the data-collapse-toggle data attribute to enable the dismissible feature.
Set yourself free.
2. Colored Toasts
Copy
Item moved successfully.
Item has been deleted.
Improve password difficulty.
3. Simple Toast
Copy
Message sent successfully.
5. Toast message
Copy
6. Push Notification
Copy
New notification
Bonnie Green
commented on your photo
a few seconds ago
7. Interactive Toast
Copy
8. Toast Position
Copy
Use the absolute class from Tailwind CSS to position these toast components relative to the main content wrapper element from your document:
- Top left: absolute top-5 left-5
- Top right: absolute top-5 right-5
- Bottom left: absolute bottom-5 left-5
- Bottom right: absolute bottom-5 right-5
Top left positioning.
Top right positioning.
Bottom right positioning.
Bottom left positioning.
On this Page
- Default toast
- Colored Toasts
- Simple Toast
- Toast with undo button
- Toast message
- Push Notification
- Interactive Toast
- Toast Position
Next Element:
Previous Element:
Company
Useful Links
Subscribe for updates
Stay in Touch with us and get all the updates for next offers and Deals.