Toast
Brief, dismissible notifications that stack in a corner. They bounce in with a spring-shaped entrance and swipe away.
tsx
"use client"
import { Button } from "@/registry/seam/ui/button"
import { ToastProvider, useToast } from "@/registry/seam/ui/toast"
function ToastButton() {
const toast = useToast()
return (
<Button
variant="outline"
onClick={() =>
toast.add({
title: "Saved",
description: "Your changes bounced into view.",
})
}
>
Show toast
</Button>
)
}
export default function ToastDemo() {
return (
<ToastProvider>
<ToastButton />
</ToastProvider>
)
}bunx --bun @seamui/cli@latest add toastNotes
- Mount
ToastProvideronce at the app root; calluseToast().add({…})from anywhere inside it. - Toasts enter with an overshooting cubic-bezier (a
springs.bouncy-shaped curve) on opacity and offset; Base UI owns the stacking transforms and native swipe-to-dismiss. - Announced via an ARIA live region, focusable for keyboard dismissal, and pause-on-hover so toasts don't vanish while being read.
Press feedback, reduced motion, and haptics follow the global policy — see Motion and Haptics.