Toast

Shows a brief notification after an action.

toast-demo.tsx

"use client";import { Button } from "@/components/vip-ui/button";import { showToast } from "@/components/vip-ui/toast";export function ToastDemo() {  return (    <Button      variant="outline"      onPress={() =>        showToast({          title: "Draft saved",          description: "Your changes are saved in this workspace.",        })      }    >      Save draft    </Button>  );}

Installation

CLI

Manual

The CLI adds the files, packages, theme variables, and Tailwind plugin that this component uses. Before you run it, set up your project.

npm

yarn

pnpm

bun

pnpm dlx shadcn@latest add https://vip-ui.dev/r/vip-toast.json

Composition

ToastViewport
Render it once in the root layout. Stacks up to three toasts.

showToast Queues a toast and returns its key. Call it from an event handler.

Variants

toast-status-demo.tsx

"use client";import { Button } from "@/components/vip-ui/button";import { showToast } from "@/components/vip-ui/toast";export function ToastStatusDemo() {  return (    <div className="flex flex-wrap justify-center gap-2">      <Button        variant="outline"        onPress={() =>          showToast({            title: "Update available",            description: "Version 2.6 is ready to install.",          })        }      >        Info      </Button>      <Button        variant="outline"        onPress={() =>          showToast({            title: "Release published",            description: "Version 2.6 is live.",            variant: "success",          })        }      >        Success      </Button>      <Button        variant="outline"        onPress={() =>          showToast({            title: "Billing needs attention",            description: "Update the card on file before Friday.",            variant: "warning",          })        }      >        Warning      </Button>      <Button        variant="outline"        onPress={() =>          showToast({            title: "Upload failed",            description: "Check the connection and try again.",            variant: "error",          })        }      >        Error      </Button>    </div>  );}

Action

A toast with an action stays open until the user closes it.

toast-action-demo.tsx

"use client";import { Button } from "@/components/vip-ui/button";import { showToast } from "@/components/vip-ui/toast";export function ToastActionDemo() {  return (    <Button      variant="outline"      onPress={() =>        showToast({          title: "Conversation archived",          action: {            label: "Undo",            onAction: () =>              showToast({ title: "Conversation restored", variant: "success" }),          },        })      }    >      Archive    </Button>  );}

Stack

Hover or focus the stack to expand it. Swipe a toast to close it.

toast-stack-demo.tsx

"use client";import { Button } from "@/components/vip-ui/button";import { showToast } from "@/components/vip-ui/toast";const invites = ["Ana Ruiz", "Kenji Sato", "Lena Fischer"];export function ToastStackDemo() {  return (    <Button      variant="outline"      onPress={() => {        invites.forEach((name, index) => {          window.setTimeout(            () =>              showToast({                title: `Invite sent to ${name}`,                description: "The invite link expires in 7 days.",                variant: "success",              }),            index * 160,          );        });      }}    >      Send 3 invites    </Button>  );}

Timeout

A toast closes after 5 seconds. Set timeout to 0 to keep it open.

toast-timeout-demo.tsx

"use client";import { Button } from "@/components/vip-ui/button";import { showToast } from "@/components/vip-ui/toast";export function ToastTimeoutDemo() {  return (    <div className="flex flex-wrap justify-center gap-2">      <Button        variant="outline"        onPress={() =>          showToast(            {              title: "Link copied",              description: "The share link is on your clipboard.",              variant: "success",            },            { timeout: 10000 },          )        }      >        Copy share link      </Button>      <Button        variant="outline"        onPress={() =>          showToast(            {              title: "Connection lost",              description: "Changes sync when the connection returns.",              variant: "warning",            },            { timeout: 0 },          )        }      >        Disconnect      </Button>    </div>  );}

API reference

vip/ui adds or changes the props below. For all other props, see React Aria Toast (opens in a new tab).

ToastViewport

children: ({ toast }) => ReactElement: Renders each toast. Build it from Toast, ToastIcon, ToastContent, ToastTitle, ToastDescription, ToastAction, and ToastClose.

showToast message

showToast(message, options) shows a toast and returns its key. To close that toast, call toastQueue.close(key).

title: stringRequired: The main text of the toast.
description: string: Text below the title.
variant: "info" | "success" | "warning" | "error" = "info": Sets the icon and its colors.
action: { label: string; onAction: () => void }: Adds a button after the text. A press calls onAction and closes the toast.

showToast options

timeout: number = 5000: Milliseconds before the toast closes. Values under 5000 become 5000. Set 0 to keep the toast open until the user closes it. A toast with an action defaults to 0. Hover and focus pause the timer.