Overlays

Toast

The place where toasts appear. Mount it once, near the root of the app. It is a polite live region, so screen readers announce new toasts without interrupting, and it sits in the top layer (above open dialogs).

demos/toast.tsx

import { Button } from "pixelbits/button";
import { toast } from "pixelbits/toast";

export default function Demo() {
  return (
    <div className="flex flex-wrap gap-3">
      <Button
        onClick={() =>
          toast({
            title: "Copied to clipboard",
            description: "pnpm add pixelbits",
            variant: "success",
          })
        }
      >
        Success
      </Button>
      <Button
        onClick={() =>
          toast({
            title: "Upload failed",
            description: "The file is over 5 MB.",
            variant: "danger",
            action: { label: "Retry", onClick: () => {} },
          })
        }
      >
        Error
      </Button>
    </div>
  );
}

Installation

npm: import

import { Toaster, toast } from "pixelbits/toast";

shadcn: copy the source

npx shadcn add https://pixelbits.ali-moradi-develop.com/r/toast.json

API

<Toaster>

Example

<Toaster position="bottom-end" />

Prop	Type	Default	Description
position	"top-start" \| "top-end" \| "bottom-start" \| "bottom-end"	"bottom-end"	Corner where toasts stack. `start`/`end` follow the text direction.
max	number	3	Most toasts visible at once; older ones are hidden first.
className	string	—	Extra classes for the toast list.