Component · popover (manual) + aria-live

Toast

Notifications from anywhere with toast(), announced to screen readers.

Install

npx @lazizbekio/mitame add toast

Usage

import { Button } from "@/components/mitame/ui/button";
import { Toaster, toast } from "@/components/mitame/ui/toast";

export default function ToastDemo() {
  return (
    <div className="flex flex-wrap gap-3">
      <Button
        variant="primary"
        onClick={() =>
          toast.success("Changes saved", {
            description: "Your profile is up to date.",
            action: { label: "Undo", onClick: () => toast("Undone") },
          })
        }
      >
        Save
      </Button>
      <Button onClick={() => toast.error("Couldn't connect", { description: "Check your network and try again." })}>
        Fail
      </Button>
      {/* Render <Toaster /> once near the root of your app. */}
      <Toaster />
    </div>
  );
}

Props

Prop	Type	Default	Description
`toast(title \| options)`	`string \| ToastOptions`	—	Shows a toast, returns its id.
`toast.success / error / warning`	`(title, options?) => id`	—	Shortcuts for variants.
`toast.dismiss(id?)`	`(id?: number) => void`	—	Close one, or all.
`options.duration`	`number`	`4000`	Use Infinity to keep it until closed.
`options.action`	`{ label, onClick }`	—	One button, like Undo.
`Toaster position`	`"top-left" … "bottom-right"`	`"bottom-right"`	Render <Toaster /> once near the root.

Notes

Hovering pauses the timer. On phones toasts span the screen.

Styling

Every part has a data-slot starting with toast, and state lives in data-state,data-variant and friends. Pass any class to override; theme styles sit in a lower CSS layer, so yours win. See Theming.