Skip to content

Toast

Base UI

A short message that announces itself and goes away.

Install

$ npx shadcn@latest add https://spotcheckui.com/r/toast.json

Also installs @base-ui/react.

Usage

import { ToastProvider, toast } from "@/components/spotcheck/toast"

// Wrap your app once.
<ToastProvider>{children}</ToastProvider>

// Then call it from anywhere.
toast.add({ title: "Saved", description: "support-qa is up to date." })

Screen readers hear each toast as it arrives.

Props

  • timeoutnumberDefault 5000How long a toast stays, in milliseconds.

Keyboard

F6Move focus into the toasts
TabReach the dismiss button
EscDismiss the focused toast

Reduced motion

Toasts appear without their short rise.