3 Pure CSS5 with JSPublished 2026-10-04Free · no sign-up
Eight ways to tell people something happened: stacked toasts, inline success, info, warning and error alerts, a dismissible announcement banner, a notification bell with a panel, an undo toast with a pausable timer, an activity feed, a snackbar and a soft permission prompt.
Toasts that slide in at the corner, stack on top of each other and disappear after five seconds. They are added to a polite live region so screen readers announce each message, and each toast has a close button for people who need more time.
const list = document.querySelector('.toasts');
let n = 0;
function toast(msg) {
const li = document.createElement('li');
li.innerHTML = '<span></span><button aria-label="Dismiss notification">×</button>';
li.firstChild.textContent = msg;
li.querySelector('button').addEventListener('click', () => li.remove());
list.appendChild(li);
setTimeout(() => li.remove(), 5000);
}
document.getElementById('nt-add').addEventListener('click', () => toast('Changes saved (' + (++n) + ')'));
toast('Welcome back, Sam');
02. Inline Alert Messages
AlertStatus
Four inline alerts for success, information, warning and error, each with an icon, a short title and a sentence. The type is spelled out in the title as well as shown by colour, and the icons are decorative so they are hidden from screen readers.
View code
<div class="alerts">
<div class="al ok"><span aria-hidden="true">✓</span><p><b>Saved.</b> Your shop settings are up to date.</p></div>
<div class="al info"><span aria-hidden="true">i</span><p><b>Note:</b> Prices will include tax from 1 November.</p></div>
<div class="al warn"><span aria-hidden="true">!</span><p><b>Warning:</b> Only 3 units left of the linen tote.</p></div>
<div class="al err" role="alert"><span aria-hidden="true">×</span><p><b>Error:</b> Payment failed. Check the card details.</p></div>
</div>
A full-width announcement bar for sales or service news, with a link and a close button. The dismissal is remembered in localStorage so the banner does not return on every page, and the close button has a clear accessible name.
View code
<div class="bn" id="bn" role="region" aria-label="Announcement">
<p>Free shipping on every order this weekend. <a href="#">Shop now</a></p>
<button aria-label="Dismiss announcement">×</button>
</div>
A bell icon with an unread count that opens a panel of recent notifications. The button's name includes the number, such as Notifications, 3 unread, unread items are marked with a dot and hidden text, and Mark all as read clears them.
A deleted-item toast with an Undo button and a thin bar that shrinks to show how long remains. Hovering or focusing the toast pauses the timer, which follows the WCAG advice to let people control time limits on messages they need to act on.
View code
<div class="ut" role="status">
<p>Product moved to trash</p>
<button>Undo</button>
<span class="tm" aria-hidden="true"></span>
</div>
A list of activity notifications with avatars, bold actor names, a time stamp in a time element and an unread highlight. Times use the datetime attribute so they are machine-readable, and the list is a plain ul that screen readers can count.
View code
<ul class="feed">
<li class="un"><span class="av" style="background:#f97316" aria-hidden="true">JL</span><p><b>Jun Li</b> commented on <a href="#">Spring catalogue</a><time datetime="2026-10-04T09:12">12 min ago</time></p></li>
<li class="un"><span class="av" style="background:#0ea5e9" aria-hidden="true">MO</span><p><b>Mira O.</b> invited you to <a href="#">Studio team</a><time datetime="2026-10-04T08:40">45 min ago</time></p></li>
<li><span class="av" style="background:#22c55e" aria-hidden="true">RB</span><p><b>Ravi B.</b> approved your draft<time datetime="2026-10-03T17:05">Yesterday</time></p></li>
</ul>
A mobile-style snackbar centred at the bottom of the screen with one message and one action, such as Retry after a failed upload. It rises into view from below, stays until dismissed, and keeps a single action so the choice is simple.
View code
<div class="snk" role="alert">
<p>Upload failed. Check your connection.</p>
<button>Retry</button>
</div>
A soft prompt that explains why notifications are useful before the browser's own permission dialog appears, so the real prompt is only shown to people who said yes. Not now is as easy to press as Turn on, which avoids nagging.
View code
<div class="pp" role="region" aria-labelledby="pp-t">
<span class="ic" aria-hidden="true">🔔</span>
<div><h3 id="pp-t">Get order updates?</h3><p>We will only notify you when an order ships or a customer messages you.</p>
<div class="acts"><button class="no">Not now</button><button class="yes">Turn on</button></div></div>
</div>
document.querySelector('.no').addEventListener('click', () => document.querySelector('.pp').hidden = true);
document.querySelector('.yes').addEventListener('click', () => { if ('Notification' in window) Notification.requestPermission(); document.querySelector('.pp').hidden = true; });
About these CSS Notifications and Alerts
Live regions
Messages that appear without a page load must be announced. Put toasts in a container with aria-live="polite", and use role="alert" only for urgent errors that should interrupt.
Give people time
Toasts that vanish after a few seconds can disappear before someone reads them. Pause the timer on hover and focus, provide a close button, and never put the only copy of important information in a toast.
Not colour alone
Success, warning and error styles need words or icons as well as colour, such as starting the message with Error. The alert demo uses a title word and an icon for each type.
Asking for permission
Explain the benefit before triggering the browser's own notification prompt, and only ask when someone says yes. The permission demo makes Not now just as easy as Turn on.
Frequently asked questions
Toast or inline alert?
Use toasts for brief confirmations of something the person did, and inline alerts for messages tied to a part of the page, such as a form error.
Which demos need JavaScript?
The toast stack, banner, bell, undo toast and permission prompt.
How long should a toast stay?
At least five seconds, longer for messages with an action, and it should pause while hovered or focused.