Skip to content
Feedback

Toast

A short message about something that just happened, with one action at most.

import { toast, Toaster } from "@flinbu/seed";

Neutral, with Undo, and an error

Past tense, no "successfully".

    import { Button, Toaster, toast } from "@flinbu/seed";

<div className="flex flex-wrap gap-xs">
  <Button variant="secondary" onClick={() => toast("12 tokens published")}>Neutral</Button>
  <Button variant="secondary" onClick={() => toast.success({ title: "Token renamed", action: { label: "Undo", onClick: () => toast("Rename undone") } })}>With Undo</Button>
  <Button variant="secondary" onClick={() => toast.error({ title: "Figma didn’t respond", description: "Nothing was synced. Your changes are safe here." })}>Error</Button>
  <Toaster />
</div>

    Use it for

    • Confirming an action: Token renamed, 12 tokens published.
    • Undo for something that can be undone.

    Use something else for

    • Errors people must act on: use Alert or a Banner on the page.

    Props

    PropTypeDefaultDescription
    toast(options | title)(ToastOptionsstring) => id–Shows a toast. Also toast.success, .error, .warning, .info and .dismiss(id?).
    titleReactNode–One short line.
    descriptionReactNode–Optional detail.
    action{ label, onClick }–One action, like Undo.
    durationnumber5000ms on screen; errors default to staying.
    Toaster: position'bottom-right''bottom-left''bottom-center''top-…''bottom-right'Where they appear. Render one Toaster near the root.

    Accessibility

    • Built on Radix Toast: announced politely (errors assertively), F8 moves focus to the toasts, swipe or Escape dismisses.
    • Hovering or focusing pauses the timer; errors stay until dismissed.