Skip to content
Twentyfirst UIPro

Toaster

Overlays · Button, Toaster

View as Markdown

Short confirmation that something happened, with optional Undo. Call toast(...) anywhere; render <Toaster/> once.

toast(text) or toast({ text, tone, icon, undo, action: {label, onClick}, duration }) returns an id; toast.dismiss(id). Toaster props: position ("bottom" default, "top").

  • Tone follows the status map: success for done, info for started, danger for removed or failed.
  • Offer undo for every reversible destructive action instead of a confirm dialog; Undo toasts last 6 s, others 4 s.
  • Hover pauses the timer; the thin line at the bottom shows time left.
  • One sentence, past tense, names the thing: "Invoice #2097 sent", not "Success!".

Toasts stack bottom-center above the dock, three at most. Hover pauses the timer.

Props

Button

PropTypeNotes
variant?"primary" | "secondary" | "soft" | "ghost" | "danger" | "danger-solid"
size?"md" | "sm"
icon?IconName
iconRight?IconName
disabled?boolean
type?"button" | "submit" | "reset"
onClick?(e: MouseEvent<HTMLButtonElement>) => void
children?ReactNode
asChild?booleanRender the single child element (a link, a router Link) with the button's look instead of a <button>.
id?string
name?stringForm field name and value, sent with the form when this button submits it.
value?string
form?stringThe id of the form this button belongs to, when it sits outside it.
title?string
tabIndex?number
autoFocus?boolean
aria-label?string
aria-labelledby?string
aria-describedby?string
aria-expanded?boolean | "true" | "false"For disclosure and menu triggers: whether what the button controls is open.
aria-controls?string
aria-haspopup?boolean | "true" | "false" | "menu" | "listbox" | "tree" | "grid" | "dialog"
aria-pressed?boolean | "true" | "false" | "mixed"For toggle buttons.
aria-current?boolean | "true" | "false" | "page" | "step" | "location" | "date" | "time"
className?stringExtra class on the root element.
style?CSSPropertiesInline style on the root element.

Toaster

PropTypeNotes
position?"bottom" | "top"
className?stringExtra class on the root element.
style?CSSPropertiesInline style on the root element.