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 toast

Notes

  • Mount ToastProvider once at the app root; call useToast().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.