Check out our latest updates including dark mode support.
Toast
A [popover] in the top layer, so it paints above
everything else without a z-index.
popovertarget opens and closes it, so no JavaScript.
Put an Alert inside for the
message.
Default
Add the toast class to a [popover]
element and trigger it with a popovertarget button.
Left as the default "auto" popover mode, it
light-dismisses on outside click or Escape, same as any other
popover.
<button popovertarget="my-toast">Show toast</button>
<div id="my-toast" popover class="toast">
<article role="status">
<svg><!-- icon --></svg>
<strong>New features available</strong>
<p>Check out our latest updates including dark mode support.</p>
</article>
</div>Placement
Use data-placement the same way as
Popover: a
"<side> <side>" tuple like
"bottom right". Bare "top",
"bottom", "left", or
"right" center the toast along that edge, and
"center" centers it in the viewport. It defaults to
"bottom right" when omitted.
Anchored to the top left corner.
Centered along the top edge.
Centered along the bottom edge.
The default placement.
<div popover class="toast" data-placement="top left">...</div>
<div popover class="toast" data-placement="top">...</div>
<div popover class="toast" data-placement="bottom">...</div>
<div popover class="toast" data-placement="bottom right">...</div>Multiple
Use popover="manual" rather than the bare
popover, which defaults to "auto" and closes
one toast when the next opens. Toasts that share a
data-placement stack behind each other as more appear, up
to 6 deep. :has() counts how many later toasts at the
same placement are open, so there are no manual offsets to keep in
sync.
The counting only works between siblings, because CSS can't compare
document position across different parents. Other content between them
is fine, they just need the same parent. Keep the toasts in one
container near the end of <body>, which is where
most toast libraries put theirs anyway.
Fans out behind newer toasts automatically.
Fans out behind newer toasts automatically.
Fans out behind newer toasts automatically.
Fans out behind newer toasts automatically.
Fans out behind newer toasts automatically.
<button popovertarget="toast-1">Show toast 1</button>
<button popovertarget="toast-2">Show toast 2</button>
<!-- ...up to as many toasts as you need, up to 6 deep -->
<div id="toast-stack">
<div
id="toast-1"
popover="manual"
class="toast"
data-placement="bottom right"
>
<article role="status">
<svg><!-- icon --></svg>
<strong>Toast 1</strong>
<p>Fans out behind newer toasts automatically.</p>
<button
class="ghost square round"
aria-label="Remove"
popovertarget="toast-1"
popovertargetaction="hide"
>
<svg><!-- x icon --></svg>
</button>
</article>
</div>
<div
id="toast-2"
popover="manual"
class="toast"
data-placement="bottom right"
>
...
</div>
</div>Dismissible
Pair a ghost square round button with
popovertarget and
popovertargetaction="hide" to close it, fully
declarative.
<div id="my-toast" popover="manual" class="toast" data-placement="bottom">
<article role="status" class="constructive">
<svg><!-- icon --></svg>
<strong>Profile updated successfully</strong>
<button
class="ghost square round"
aria-label="Remove"
popovertarget="my-toast"
popovertargetaction="hide"
>
<svg><!-- x icon --></svg>
</button>
</article>
</div>