Choose type

Choose from 5 types of toasts: success, error, warning, info, and default, each providing a distinct style and purpose for your notifications.

Example

import { toast, Toaster } from "@toastup/react";
import "@toastup/react/style";

/*
const type = {
  base: "base",
  info: "info",
  success: "success",
  warning: "warning",
  error: "error",
} as const;
*/

export function ChooseTypeExample() {
  const types = Object.keys(type);

  const handleClick = () => {
    const randomIndex = Math.floor(Math.random() * types.length);
    const randomKey = types[randomIndex];

    toast.add({
      type: type[randomKey],
    });
  };
  return (
    <div>
      <button onClick={handleClick}>Add toast</button>
      <Toaster />
    </div>
  );
}