Toast

Reports a brief status in the bottom-right corner. Polite live region; pauses on hover and closes on demand.

Preview

In action

Ping

Issue 03

A quiet confirm. One line, then it leaves.

When to use

Use it for

Confirming something that already happened: saved, sent, copied.
One line; a description only when the title needs it.

Not for

Errors the user must act on; use Alert or AlertDialog.
Anything with a link or a button inside.

Install

Three ways in. They share one source, so the pixels match whichever you pick.

1. Import the package

npm install @noorddev/vlak-react

// once, next to your app's root
import "@noorddev/vlak-react/css";

import { Toaster, toast } from "@noorddev/vlak-react";

Precompiled React and one stylesheet. No compiler to configure. Per-component imports work too: @noorddev/vlak-react/components/toast.

2. Vendor the source

npx @noorddev/vlak-cli add toast

The StyleX leaf lands in components/vlak/, for your own compiler to own. See StyleX.

3. Through shadcn

npx shadcn add https://vlak.dev/r/toast.json

The same registry item, installed by shadcn's CLI.

CSS only

<link rel="stylesheet" href="node_modules/@noorddev/vlak/css/vlak.css" />

No React. Link vlak.css and use the markup and classes below.

React

import { Toaster, toast } from "@noorddev/vlak-react";

// once, in your layout
<Toaster duration={4000} closeLabel="Dismiss" />

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

Props

toast (function)

Fire a toast from anywhere; a mounted <Toaster /> renders it.

Toaster

Prop	Type	Default	Description
`duration`	`number`	`4000`	The shortest a toast stays, in milliseconds. Longer text stays longer.
`closeLabel`	`string`	`"Dismiss"`	Accessible name of the close button on every toast.

Also accepts HTMLAttributes<HTMLDivElement>.

Keyboard

Keys	Does
`Tab`	Reaches the close button of each toast
`Enter, Space`	Dismisses the toast

Accessibility

The stack is role="status" with aria-live="polite".
Each toast has a labelled close button (closeLabel, "Dismiss" by default).
Lifetime scales with the text length and pauses while hovered or focused; duration on the call overrides it.

Markup

<div class="rs-toasts" role="status" aria-live="polite"><div class="rs-toast"><div><span class="rs-toast-title">Saved</span><p class="rs-toast-body">Your changes are live.</p></div><button class="rs-toast-close" type="button" aria-label="Dismiss">&times;</button></div></div>

Classes

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