Toast

Renderer for the headless toast queue in @plyxui/hooks. Mount the Toaster once, call toast() anywhere.

The toast queue lives in @plyxui/hooks — ToastProvider + useToast(). @plyxui/comps ships Toaster, the renderer.

That split is on purpose: the same queue can drive a custom snackbar, a banner stack, or this Toaster. Apps that need a bespoke visual skip the renderer and read from useToast() directly.

Try it live

import { ToastProvider, useToast } from "@plyxui/hooks";
import { Toaster } from "@plyxui/comps";
import { Box, Button, Stack } from "@plyxui/primitives";

function Demo() {
const { toast } = useToast();
return (
  <Stack direction="vertical" gap={3} style={{ padding: 32 }}>
    <Button onClick={() => toast({ title: "Saved", variant: "success" })}>
      Fire a success toast
    </Button>
    <Button variant="ghost" onClick={() => toast({ title: "Heads up", description: "Something to look at", variant: "default" })}>
      With description
    </Button>
    <Button variant="danger" onClick={() => toast({ title: "Couldn't save", variant: "error" })}>
      Error
    </Button>
  </Stack>
);
}

export default function App() {
return (
  <ToastProvider>
    <Box style={{ minHeight: "100vh" }}>
      <Demo />
    </Box>
    <Toaster position="bottom-right" />
  </ToastProvider>
);
}

API

import { ToastProvider, useToast } from "@plyxui/hooks";
import { Toaster } from "@plyxui/comps";

function App() {
  return (
    <ToastProvider>
      <Routes />
      <Toaster position="bottom-right" />
    </ToastProvider>
  );
}

function SaveButton() {
  const { toast } = useToast();
  return (
    <Button
      onClick={async () => {
        await save();
        toast({ title: "Saved", description: "Changes live now.", variant: "success" });
      }}
    >
      Save
    </Button>
  );
}

Variants

default, success, warning, error. The left rail accent picks the matching theme token. Override per variant with the accent prop.

Props

Native

The native Toaster lives at the same import path and supports top or bottom positions. It uses RN Animated for the enter transition.