Toaster

Setup

One <Toaster /> anywhere in the tree. toast() is callable from a click handler, a fetch wrapper or a plain module.

import { Toaster } from "@oscarkalid/ui";
 
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Toaster placement={placement} />
      </body>
    </html>
  );
}

Variants

Success, info, warn and error have shorthands. Each is marked with an icon.

Stacking

New toasts pile up to the height of one. Hover to fan the pile out. Timers hold while it is open, so nothing expires under your cursor. Drag one sideways to dismiss it.

Actions

One action per toast. Give it a longer duration than the default. Pass duration: null for one that waits to be dismissed.

Promises

One toast for the whole operation. It waits, then becomes the result.

Position

Bottom centre by default. The top placements anchor by their top edge and grow downwards, away from the screen edge.

Source

The component and the queue share one file.

packages/ui/src/components/Toaster.tsx

Last updated: 12 August 2026