toast

Auto-dismissing notification. Built on Popover API.

status: stable js: trigger support: popover-api

Preview

This overlay stays hidden until triggered — open it in the live demo →

Markup

<div class="toast-region"><div class="toast toast-success" popover id="X" role="status" aria-live="polite"><svg aria-hidden="true">…</svg><div><div class="toast-title">T</div><div class="toast-description">D</div></div><button class="toast-close" aria-label="Dismiss" onclick="X.hidePopover()">×</button></div></div>

Install

Import the component CSS (depends on base/tokens.css):

@import "@russfranky/shadcss/src/components/toast.css";

…or copy it into your repo with the CLI:

npx @russfranky/shadcss-cli add toast

Accessibility

Open via showPopover(); role=status/aria-live; stacking/auto-dismiss need JS

Classes

.toast .toast-region .toast-title .toast-description .toast-close .toast-success .toast-destructive .toast-warning .toast-info

Dependencies

base/tokens