Toast

A temporary notice.

Overview

Render Toaster once, near the root of the page. Call toast.add from an event. Toasts stack in the chosen corner, fade in, and dismiss themselves after a duration. Each toast shows a status icon, a title, and an optional description.

Swipe dismissal is not implemented. Hover pauses the timer. Escape dismisses the toast when focus is inside it. A toast does not take focus when it appears.

Preview

Customize

Type
Duration
5000

Installation

Add the component with the CLI. It copies the files in and installs anything they depend on.

npx vinyaas add toast

Usage

import { Button } from "@/components/ui/button";
import { toast, Toaster } from "@/components/ui/toast";

export function Notices() {
  return (
    <>
      <Toaster />
      <Button type="button" onClick={() => toast.add({ title: "Note saved" })}>
        Save
      </Button>
    </>
  );
}

Examples

Types

Default, success, info, warning, error, and loading. Each button fires one type. Render Toaster once.

Action

An action button stays in the toast so the user can undo.

Promise

toast.promise starts as loading and becomes success or error.

Multiple

Toasts stack. The newest sits nearest the screen edge.

In practice

A short workspace form submits and fires a success Toast. Render Toaster once near the root of the page.

API

Other attributes for the underlying element are passed through.

NameTypeDefaultDescription
titlestring—The toast heading.
descriptionstring—Optional supporting text.
type"default" | "success" | "info" | "warning" | "error" | "loading""default"Visual status. loading stays until it is updated or dismissed.
durationnumber5000Automatic dismissal in milliseconds. Hover pauses the timer.
actionProps{ children, onClick }—An action button shown on the right, beside the close button. It does not dismiss the toast by itself.
positionToastPosition"bottom-right"Placement of the Toaster. One position applies to the stack.

Accessibility

Default, success, info, warning, and loading toasts use role="status". An error uses role="alert". A loading toast sets aria-busy.

  • The dismiss control is a button named Dismiss.
  • An action is a button and stays in tab order.
  • Appearance does not move focus.