const { showToast } = useToast();

return (
  <>
    <div>
      <Button
        className="bg-green-500"
        onClick={() =>
          showToast({ type: "success", message: "Toast success" })
        }
      >
        Success
      </Button>
      <Button
        className="bg-red-500"
        onClick={() => showToast({ type: "error", message: "Toast error" })}
      >
        Error
      </Button>
      <Button
        className="bg-yellow-500"
        onClick={() =>
          showToast({ type: "warning", message: "Toast warning" })
        }
      >
        Warning
      </Button>
      <Button
        className="bg-cyan-500"
        onClick={() => showToast({ type: "info", message: "Toast info" })}
      >
        Info
      </Button>
    </div>

    <Toast position="topRight" />
  </>