Toast

Bottom right, aria-live polite, dismissed after four seconds.

Install

npx raster add toast

Markup

<div class="rs-toasts" role="status"><div class="rs-toast"><div><span class="rs-toast-title">Saved</span><p class="rs-toast-body">Your changes are live.</p></div></div></div>

React

import { toast, Toaster } from "@/components/raster/toast";

// once, in your layout
<Toaster />

// from anywhere
toast("Saved", { description: "Your changes are live." });

Classes

.rs-toasts.rs-toast.rs-toast-title.rs-toast-body