Toast
An imperative API, like Sonner: call toast(...) from anywhere in your code, no context provider needed at the call site. Mount <ToastViewport /> once, near the root of your app, to actually render them. Every toast is its own live region, role="alert" for danger/warning, role="status" for default/success, the same reasoning as Callout.
Playground
Toggle every adjustable prop and watch the component — and the code — update live.
Usage
<Button onClick={() => toast("Changes published")}>Publish</Button>
<ToastViewport /><kernel-button id="publish">Publish</kernel-button>
<kernel-toast-viewport></kernel-toast-viewport>
<script type="module">
import { toast } from "@kernelui-lib/elements";
document.getElementById("publish").addEventListener("click", () => {
toast("Changes published");
});
</script>API
| Call | Notes |
|---|---|
toast(title, options?) | Default variant |
toast.success(title, options?) | — |
toast.warning(title, options?) | — |
toast.danger(title, options?) | — |
toast.dismiss(id) | Dismiss a specific toast early |
options: { description?, duration? }. duration defaults to 4000ms; pass 0 to require a manual dismiss.