Toast

A transient notification stack built on Radix's Toast primitive. Wrap your app once, then push notifications from anywhere with the imperative useToast() hook.

function ToastTrigger() {
const { toast } = useToast();
return (
  <Button onClick={() => toast({ title: "Changes saved", description: "Your profile was updated.", variant: "success" })}>
    Show toast
  </Button>
);
}
function Demo() {
return (
  <ToastProvider>
    <ToastRegistry>
      <ToastTrigger />
    </ToastRegistry>
    <ToastViewport />
  </ToastProvider>
);
}
render(<Demo />);

Editable — change the code above and the preview updates live.

Toasts pause auto-dismiss on hover/focus and support swipe-to-dismiss on touch devices, both handled by Radix.

Installation

import { ToastProvider, ToastViewport, ToastRegistry, useToast } from "@labanaat/ui/toast";

Props

Prop	Type	Default	Description
title	ReactNode	—	Toast title (in useToast().toast(options))
description	ReactNode	—	Toast body text
variant	"default" \| "success" \| "danger"	"default"	Visual style
durationMs	number	5000	Auto-dismiss duration