Toast V01

Author: Colorlib

Released: September 2026

License: CC BY 3.0

A top-right stack of white toasts in four variants: success, info, warning and error. Each toast has a tinted status icon, a title, a short message, a close button and a thin progress line that shrinks until it closes itself. Error toasts use role="alert" and the rest are announced politely.

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

• Success, info, warning and error variants from one custom property
• Shrinking progress line synced with the auto-dismiss timer
• Timer pauses on hover, on keyboard focus and when the tab is hidden
• Esc closes the focused or newest toast
• Oldest toast drops out when more than five are on screen
• Reduced-motion friendly enter and exit