Toast V03

Author: Colorlib

Released: September 2026

License: CC BY 3.0

An incoming-message toast for a team chat app, with the sender's photo and online dot, name, source and a two-line preview of the message. Reply opens a small form inside the toast and keeps it on screen while you type; sending swaps the toast for a short confirmation. Mark as read closes it and updates the unread count.

It is plain HTML and CSS plus a few lines of vanilla JavaScript: no jQuery, no Bootstrap files, no plugins, and the download is 215 KB. Use it on its own, or drop it into a Bootstrap 4, 5 or 6 project and it looks the same.

• Inline reply form that holds the toast open while typing
• Reply button is a disclosure with aria-expanded
• Frosted-glass card with backdrop blur and solid fallback
• Two-line clamp for long message previews
• Hover and focus pause, Esc closes, at most three on screen