Toast

Toaster shows short feedback after an action, like Saved or Exported. Call toast() from anywhere; the Toaster you mount once is a polite live region, so screen readers hear each note. Notes close after four seconds, hold open while hovered or focused, and stack three deep. Like the charts, it takes your theme's ink and paper, light or dark, and needs no Tailwind.

Example

import "@/components/dithercharts/controls.css"
import { Toaster, toast } from "@/components/dithercharts/toast"

// Once, e.g. in your root layout:
<Toaster />

// Anywhere in client code:
<Button onClick={() => toast("Saved the Q3 revenue view")}>Save view</Button>
toast("Sync failed, retrying", { duration: Infinity })

Install

Controls install with DitherCharts Pro. See Installation to log in, then import controls.css once, e.g. in your root layout.

npx dithercharts add toast

Props

It renders a native element, so every other attribute that element takes passes through.