Appearance
Toast
Toasts are brief messages that appear temporarily to provide feedback.
Usage
Place a single .ToastRegion near the end of <body>. Toasts are appended inside it by JavaScript.
html
<div class="ToastRegion" aria-live="polite" aria-atomic="false">
<div class="Toast success" role="status">
<svg class="Toast-Icon" aria-hidden="true">…</svg>
<div class="Toast-Body">
<strong class="Toast-Title">Saved</strong>
<p class="Toast-Message">Changes saved.</p>
</div>
<button class="Toast-Close" aria-label="Dismiss">×</button>
</div>
</div>Region Positions
The default position is bottom-right (no modifier needed).
.top-right.top-left.bottom-left.bottom-center
html
<div class="ToastRegion top-right" aria-live="polite" aria-atomic="false">…</div>Variants
success: Positive outcomes.warning: Cautionary actions.danger: Destructive or error states.info: Informational messages.
Example
Accessibility
Use role="status" and aria-live="polite" (on the region) for success and info toasts. Use role="alert" and aria-live="assertive" for danger and warning toasts, as they require immediate attention.
Animations
Apply data-entering when a toast appears and data-leaving when it is being removed. Both trigger CSS animations. Animations are automatically disabled when prefers-reduced-motion: reduce is set.
html
<div class="Toast success" data-entering>…</div>
<div class="Toast success" data-leaving>…</div>Structure
.ToastRegion: Fixed container that holds all toasts..Toast-Icon: SVG icon element, colored by variant..Toast-Body: Wraps the title and message..Toast-Title: Bold heading of the toast..Toast-Message: Supporting message text..Toast-Close: Dismiss button.