Toast

Non-modal notification for brief action feedback, with info/success/warning/error variants and an imperative useToast() hook.

Information

This is a info toast message.

Installation

npx paubha@latest add toast

Usage

Render <Toast> directly for a static/controlled toast, or wrap your app in <ToastProvider> once and call useToast().toast(...) from anywhere to show one imperatively:

import { ToastProvider, useToast } from "@/components/ui/toast";

function Save() {
  const { toast } = useToast();
  return (
    <button
      onClick={() =>
        toast({ title: "Saved", description: "Your changes were saved." })
      }
    >
      Save
    </button>
  );
}

export function App() {
  return (
    <ToastProvider>
      <Save />
    </ToastProvider>
  );
}

Examples

Variants

Info

This is a info toast message.

Success

This is a success toast message.

Warning

This is a warning toast message.

Error

This is a error toast message.

Imperative usage

API reference

Prop	Type	Default	Description
title	ReactNode	—	The toast's primary message.
description	ReactNode	—	Optional supporting text below the title.
variant	"info" \| "success" \| "warning" \| "error"	"info"	Accent color and aria-live urgency (assertive for warning/error).
onDismiss	() => void	—	Called when the close button is activated. Omit to hide the close button.

useToast().toast(options): additional options

Prop	Type	Default	Description
duration	number	6000	Milliseconds before auto-dismiss. Set to 0 to disable auto-dismiss.

Alert: for persistent inline messages
Dialog: for messages needing confirmation
Modal: for blocking interactions

Accessibility

Role. role="alert", so screen readers announce the content immediately on mount.
Urgency. aria-live is "assertive" for warning/error variants and "polite" for info/success.
Dismiss. The close button has aria-label="Dismiss" and its own glow-focus ring. Escape dismisses while focus is inside the toast; focus is never moved to it.
Stack. ToastProvider shows at most two toasts — a third drops the oldest.
Auto-dismiss. Configurable via duration (default 6s); set to 0 to require manual dismissal.

Toast

Toast

useToast().toast(options): additional options

On this page